Vue自定义防重复点击指令（v-repeatClick）

 ！！！Vue防抖节流方法：VUE使用节流和防抖_vue防抖节流_停留的章小鱼的博客-CSDN博客

新建js文件directive.js:

// directive.js
// 防重复点击(指令实现)
//使用： 在需要的按钮中加 v-repeatClick 指令即可 <el-button v-repeatClick @click="clickHandle">保存</el-button>
export default {install(Vue) {Vue.directive('repeatClick', {inserted(el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 1500)}})},})},
}

全局引入main.js文件:

import directive from '@/utils/directive';
Vue.use(directive);

页面使用：

<el-button v-repeatClick @click="clickHandle">保存</el-button>