51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import { Directive } from "vue";
|
||
|
||
const antiShake: Directive = {
|
||
mounted(el, binding) {
|
||
// 判断是否是函数，防抖指令必须绑定函数
|
||
if (typeof binding.value != "function") {
|
||
return console.warn("Anti-shake instructions must be bound to a function");
|
||
}
|
||
let timeout: any = null;
|
||
// 给el添加自定义事件-防抖函数
|
||
el.__onClick__ = () => {
|
||
if (timeout) clearTimeout(timeout);
|
||
timeout = setTimeout(() => {
|
||
// 由于绑定的是函数，这里直接调用绑定之即可(也就是调用绑定的函数)
|
||
binding.value();
|
||
}, 500);
|
||
};
|
||
// 监听点击事件，点击后调用绑定的自定义事件
|
||
el.addEventListener("click", el.__onClick__);
|
||
},
|
||
beforeUnmount(el) {
|
||
el.removeEventListener("click", el.__onClick__);
|
||
}
|
||
};
|
||
|
||
export default antiShake;
|
||
|
||
// 每个生命周期都有两个参数，el、binding
|
||
// 其中el为绑定的dom元素，binding为指令的传入值
|
||
// app.directive("focus", {
|
||
// 在绑定元素的 attribute 前
|
||
// 或事件监听器应用前调用
|
||
// created(el, binding, vnode) {
|
||
// // 下面会介绍各个参数的细节
|
||
// },
|
||
// // 在元素被插入到 DOM 前调用
|
||
// beforeMount(el, binding, vnode) {},
|
||
// // 在绑定元素的父组件
|
||
// // 及他自己的所有子节点都挂载完成后调用
|
||
// mounted(el, binding, vnode) {},
|
||
// // 绑定元素的父组件更新前调用
|
||
// beforeUpdate(el, binding, vnode, prevVnode) {},
|
||
// // 在绑定元素的父组件
|
||
// // 及他自己的所有子节点都更新后调用
|
||
// updated(el, binding, vnode, prevVnode) {},
|
||
// // 绑定元素的父组件卸载前调用
|
||
// beforeUnmount(el, binding, vnode) {},
|
||
// // 绑定元素的父组件卸载后调用
|
||
// unmounted(el, binding, vnode) {}
|
||
// });
|