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

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

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

<el-button :disabled="requestLock">确定</el-button>jsfunc() {    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>