1.新建文件preventReClick.js(文件位置可以放在公共文件夹里)
import Vue from 'vue'
//自定义指令 -- 防抖
const clickAgain = Vue.directive('clickAgain',{
// 指令的定义
bind(el, binding, vnode, oldVnode) {
// 绑定this
let self = vnode.context;
el.onclick = function (e) {
if (self._is_click) {
return false;
}
/*执行指令绑定的事件*/
self[binding.expression]()
self._is_click=true;
setTimeout(()=>{
self._is_click=false;
},2000)
};
}
});
export default clickAgain
2.main.js中引入文件
3.使用自定义指令
需要注意一下,这里的v-clickAgain需要和防抖文件内const clickAgain的名称一样,handelClickSubmit是事件的名称