[TOC] ## 示例 通过自定义`v-xxx` 的形式绑定到元素上 指令钩子的语法 ``` const myDirective = { // 在绑定元素的 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) {} } // 参数说明 el：指令绑定到的元素。这可以用于直接操作 DOM。 binding：一个对象，包含以下属性。 value：传递给指令的值。例如在 v-my-directive="handle_func" 中，值是 handle_func 函数,也可以是其他类型。 oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。 arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。 modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。 instance：使用该指令的组件实例。 dir：指令的定义对象。 vnode：代表绑定元素的底层 VNode。 prevVnode：代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。 ``` ## 示例 ### 自动激活 autofocus ``` import {DirectiveBinding} from 'vue'; // 自动激活 input export default { mounted(el: HTMLElement, binding: DirectiveBinding) { el.querySelector("input")?.focus(); }, updated(el: HTMLElement, binding: DirectiveBinding) { el.querySelector("input")?.focus(); }, }; ``` 注册 ``` import VAutofocus from "@/directives/v-autofocus"; app.directive('autofocus', VAutofocus); ``` 使用 ``` <v-text-field v-autofocus></v-text-field> ``` ### 长按事件 ``` import {DirectiveBinding} from 'vue'; let start: any; let cancel: any; // 创建长按事件,目前有bug const longPress = { mounted(el: HTMLElement, binding: DirectiveBinding) { let pressTimer: number | null = null; start = (e: MouseEvent | TouchEvent) => { if ('button' in e && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = window.setTimeout(() => { handler(e); }, 1000); // 设置长按时间为1秒 } }; cancel = () => { if (pressTimer !== null) { clearTimeout(pressTimer); pressTimer = null; } }; const handler = (e: Event) => { // binding.value 为绑定的函数 binding.value(e);// ; }; el.addEventListener('mousedown', start); el.addEventListener('touchstart', start); el.addEventListener('click', cancel); el.addEventListener('mouseout', cancel); el.addEventListener('touchend', cancel); el.addEventListener('touchcancel', cancel); }, unmounted(el: HTMLElement) { el.removeEventListener('mousedown', start); el.removeEventListener('touchstart', start); el.removeEventListener('click', cancel); el.removeEventListener('mouseout', cancel); el.removeEventListener('touchend', cancel); el.removeEventListener('touchcancel', cancel); } }; export default longPress; ``` 注册 ``` import VlongPress from "@/directives/v-long-press"; app.directive('longpress', VlongPress); ``` 使用 ``` <v-list-item v-longpress="handle_longPress" ></v-list-item> ```