[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> ```