!!!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>