1、在项目中遇到一个问题：当事件中的代码执行耗费时间，且用户在短时间不断点击按钮，造成短时间多次触发了按钮的事件（不断向服务器发起请求）
2、解决办法
①方法一： 定义一个变量（如：isLock）来控制按钮的disable属性，进而来防止用户短时间的多次点击按钮
②方法二：全局定义一个指令，通过在按钮绑定指令来控制按钮被点击间隔时间
3、具体实现：
方法1步骤：
① 首先设置变量isLock属性值为false,使得按钮可点击（disable: true）
② 当用户点击后，立即设置按钮不可点击（disable: false）
③ 等待事件执行完或者相应的间隔时间后，恢复按钮为可点击状态
<el-button @click="clickBtn" :disable="isLock">按钮</el-button>export default{data(){return {isLock: false, // 控制按钮的disable属性}},methods: {clickBtn(){// 设置按钮不可点击（disable: false）this.isLock = true// 执行耗时间的代码或事件请求等....// 等待事件执行完或者相应的间隔时间后，恢复按钮为可点击状态setTimeout(() => {this.isLock = false}, 2000)}}}
方法2：
① 首先创建一个指令文件中（如：directive.js文件）
② 在directive.js文件在创建一个全局的指令（如：preventReClick）
③ 在指令中根据按钮元素的disable状态值来设置被绑定按钮的状态（如，改变按钮的背景色和边框色）
④ 然后在入口文件main.js文件中引入指令
⑤ 在需要禁止重复点击的按钮上绑定指定
====== directive.js文件中 ====import Vue from 'vue'const preventReClick = Vue.directive('preventReClick',{inserted: function(el, binding, vNode, oldVnode){el.addEventListener('click', () => {if(!el.disabled){el.disabled = trueel.style.backgroundColor = '#ccc'el.style.border = 'none'setTimeout(() => {el.disabled = falseel.style.backgroundColor = '#1890ff'el.style.border = '1px solid #1890ff'}, 2000)}})}})export default {preventReClick }====== 在main.js文件中引入指令 =====import {preventReClick } from './directive/directive.js'Vue.use(preventReClick )======= 按钮元素上绑定指定 ======<el-button v-preventReClick >需要阻止重复点击的按钮元素11111</el-button><button v-preventReClick >需要阻止重复点击的按钮元素22222</button>
