vue 设置对button不能进行短时间的重复触发点击事件

直接上代码了兄弟们

① 首先创建一个指令文件中（如：directive.js文件）
② 在directive.js文件在创建一个全局的指令（如：preventReClick）
③ 在指令中根据按钮元素的disable状态值来设置被绑定按钮的状态（如，改变按钮的背景色和边框色）
④ 然后在入口文件main.js文件中引入指令
⑤ 在需要禁止重复点击的按钮上绑定指定

import Vue from "vue";

const preventReClick = Vue.directive('preventReClick',{
	inserted: function(el, binding, vNode, oldVnode){
		el.addEventListener('click', () => {
			if(!el.disabled){
			    el.disabled = true
			    el.style.backgroundColor = '#ccc'
			    el.style.border = 'none'
       			setTimeout(() => {
          			el.disabled = false
          			 el.style.backgroundColor = '#1890ff'	
          			 el.style.border = '1px solid #1890ff'
        		}, 3000)
			}
		})
	}
})

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>

还可以对axios请求拦截做统一处理，或者直接在页面里写个定时器，根据场景做选择吧