實現(xiàn)功能為給按鈕添加自定義指令v-debounce="log",達到防抖效果
<button v-debounce="log">節(jié)流按鈕</button>//log為傳入的函數(shù)名
directives: {
debounce: {//防抖函數(shù)指令
inserted: function(el, binding) {
let timer;
el.addEventListener("click", () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
//關(guān)鍵點:vue 的自定義指令傳遞的參數(shù)binding 如果是一個函數(shù),則通過 binding.value()來執(zhí)行,通過上述示例,還可以傳遞比如事件, 綁定對象之類的
binding.value();
}, 1000);
});
}
}
},
methods: {
log() {
console.log(1);
}
}
