在 Vue 3 中,封装自定义指令可以帮助你更好地复用一些常见的DOM操作逻辑,自定义指令可以用于处理一些特定的用户交互行为,本文给大家介绍了Vue3封装自定义指令的示例,需要的朋友可以参考下 
目录
引言创建自定义指令全局自定义指令局部自定义指令自定义指令的生命周期钩子示例：带参数和修饰符的自定义指令引言
在 Vue 3 中，封装自定义指令可以帮助你更好地复用一些常见的DOM操作逻辑。自定义指令可以用于处理一些特定的用户交互行为，比如焦点管理、拖拽功能等。下面是如何在 Vue 3 中创建和使用自定义指令的步骤：
创建自定义指令
首先，你需要在你的 Vue 应用中注册一个全局或局部的自定义指令。这里我们先来看如何创建一个全局自定义指令。
全局自定义指令
假设你想创建一个自动聚焦的自定义指令，当元素第一次渲染到页面时，自动获取焦点。
在 main.js 中注册全局指令import { createApp } from 'vue';import App from './App.vue';const app = createApp(App);app.directive('focus', { mounted(el) { el.focus(); }});app.mount('#app');在组件中使用<template> <input v-focus /></template><script>export default { name: 'MyComponent'};</script>局部自定义指令
如果你只想在某个组件内使用自定义指令，可以在该组件的选项中定义它。
在组件内部定义指令<template> <input v-local-focus /></template><script>export default { name: 'MyComponent', directives: { 'local-focus': { mounted(el) { el.focus(); } } }};</script>自定义指令的生命周期钩子
自定义指令有多个生命周期钩子，可以让你在不同阶段对绑定的元素执行操作：
mounted(el, binding, vnode, prevVnode)- 当被绑定的元素插入到 DOM 中时调用。updated(el, binding, vnode, prevVnode)- 当包含组件的 VNode 及其子组件的 VNode 更新后调用，但可能发生在其子组件的 VNode 更新之前。beforeUnmount(el, binding, vnode)- 只调用一次，指令绑定的元素从其父节点移除时调用。这些钩子函数接受以下参数：
el: 指令所绑定的元素，可以用来直接操作 DOM。
binding: 一个对象，包含以下属性：
value: 指令的绑定值，例如：v-my-directive="1 + 1"中的2。oldValue: 指令绑定的前一个值，仅在updated和beforeUnmount钩子中可用。name: 指令名，例如：v-my-directive中的my-directive。expression: 字符串形式的指令表达式，例如：v-my-directive="1 + 1"中的"1 + 1"。arg: 传给指令的参数（如果有的话），例如：v-my-directive:foo中的foo。modifiers: 一个包含修饰符的对象。例如：v-my-directive.foo.bar包含{ foo: true, bar: true }。vnode: VNode，表示绑定发生所在的元素。
prevVnode: 上一个 VNode，仅在updated和beforeUnmount钩子中可用。
示例：带参数和修饰符的自定义指令
假设我们需要一个自定义指令，它根据参数决定是否给元素添加点击事件，并且可以根据修饰符决定点击时是显示还是隐藏元素。
定义指令app.directive('click-toggle', { mounted(el, binding) { el.addEventListener('click', () => { if (binding.arg === 'show') { el.style.display = 'block'; } else if (binding.arg === 'hide') { el.style.display = 'none'; } }); }});在模板中使用<template> <button v-click-toggle:hide>点击隐藏我</button> <button v-click-toggle:show>点击显示我</button></template>
通过
