实现功能为给按钮添加自定义指令v-debounce="log",达到防抖效果
<button v-debounce="log">节流按钮</button>//log为传入的函数名
directives: {
debounce: {//防抖函数指令
inserted: function(el, binding) {
let timer;
el.addEventListener("click", () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
//关键点:vue 的自定义指令传递的参数binding 如果是一个函数,则通过 binding.value()来执行,通过上述示例,还可以传递比如事件, 绑定对象之类的
binding.value();
}, 1000);
});
}
}
},
methods: {
log() {
console.log(1);
}
}
