2024-07-13 18:47:45 +08:00
|
|
|
|
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) {}
|
|
|
|
|
|
// });
|
