32 lines
808 B
TypeScript
32 lines
808 B
TypeScript
|
/**
|
|||
|
|
* v-debounce
|
|||
|
|
* 按钮防抖指令，可自行扩展至input
|
|||
|
|
* 接收参数：function类型
|
|||
|
|
*/
|
|||
|
|
import type { Directive, DirectiveBinding } from "vue";
|
|||
|
|
interface ElType extends HTMLElement {
|
|||
|
|
__handleClick__: () => any;
|
|||
|
|
}
|
|||
|
|
const debounce: Directive = {
|
|||
|
|
mounted(el: ElType, binding: DirectiveBinding) {
|
|||
|
|
if (typeof binding.value !== "function") {
|
|||
|
|
throw "callback must be a function";
|
|||
|
|
}
|
|||
|
|
let timer: NodeJS.Timeout | null = null;
|
|||
|
|
el.__handleClick__ = function () {
|
|||
|
|
if (timer) {
|
|||
|
|
clearInterval(timer);
|
|||
|
|
}
|
|||
|
|
timer = setTimeout(() => {
|
|||
|
|
binding.value();
|
|||
|
|
}, 500);
|
|||
|
|
};
|
|||
|
|
el.addEventListener("click", el.__handleClick__);
|
|||
|
|
},
|
|||
|
|
beforeUnmount(el: ElType) {
|
|||
|
|
el.removeEventListener("click", el.__handleClick__);
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default debounce;
|