关于VUE中按钮重复点击，重复请求的处理

Posted 2021-09-14 Mark

处理按钮重复点击请求的方法有一些，之前常用点击后记录状态然后锁定按钮的方式

• 第一步，点击按钮，设置一个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>