关于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>