关于vue.js:关于VUE中按钮重复点击重复请求的处理

解决按钮反复点击申请的办法有一些，之前罕用点击后记录状态而后锁定按钮的形式

• 第一步，点击按钮，设置一个 lock 为 true，绑定到按钮的 disabled
• 执行申请后不论胜利还是失败都重置为 false，开释开按钮的再次点击

<el-button :disabled="requestLock"> 确定 </el-button>

js

func() {
    this.requestLock = true
    sendMessage(query).then((response) => {this.delayedRequest()
    }).catch(error => {this.delayedRequest()
    })
}

delayedRequest() {setTimeout(() => {this.requestLock = !this.requestLock}, 500)
},

这就根本做到防反复点击申请

尽管这种办法能够做到，然而咱们不可能去每个页面都减少这种办法，太多反复、代码，所以想到了用指令的形式，做好指令全局引入，所有的中央都能够高兴的应用了

在 directive 我的项目外面减少一个 JS 文件

import Vue from 'vue'

const preventDbClick = Vue.directive('preventDbClick', {inserted: function (el, binding) {el.addEventListener('click', () => {if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {el.disabled = false}, 1000)
      }
    })
  }
});
 
export {preventDbClick}

在 main.js 外面引入指令

import './directive/preventDbClick.js'

页面中的按钮就能够应用了~

<el-button v-preventDbClick> 确定 </el-button>