Vue3 如何封装自定义指令？

Question

Vue3 如何封装自定义指令？

仓乃文 · Accepted Answer

Vue3 自定义指令用于复用 DOM 操作，有 mounted、updated、unmounted 等生命周期钩子。基础自定义指令 - 自动聚焦： ```javascript const vFocus = { mounted(el) { el.focus(); // 元素挂载后自动获取焦点 } }; ``` 带参数的自定义指令： ```javascript const vColor = { mounted(el, binding) { el.style.color = binding.value; }, updated(el, binding) { if (binding.value !== binding.oldValue) { el.style.color = binding.value; } } }; // 使用：

红色文字

``` 完整示例 - 点击外部关闭： ```javascript const vClickOutside = { mounted(el, binding) { el._handler = (event) => { if (!el.contains(event.target)) binding.value(event); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); } }; ``` 注册指令： ```javascript // 全局注册 app.directive("focus", vFocus); // 局部注册（在