vue3封装自定义指令

在 Vue 3 中，封装自定义指令可以帮助你更好地复用一些常见的DOM操作逻辑。自定义指令可以用于处理一些特定的用户交互行为，比如焦点管理、拖拽功能等。下面是如何在 Vue 3 中创建和使用自定义指令的步骤：

创建自定义指令

首先，你需要在你的 Vue 应用中注册一个全局或局部的自定义指令。这里我们先来看如何创建一个全局自定义指令。

全局自定义指令

假设你想创建一个自动聚焦的自定义指令，当元素第一次渲染到页面时，自动获取焦点。

1. 在 main.js 中注册全局指令

   Javascript
   深色版本
   import { createApp } from 'vue';
   import App from './App.vue';
   
   const app = createApp(App);
   
   app.directive('focus', {
     mounted(el) {
       el.focus();
     }
   });
   
   app.mount('#app');
   

2. 在组件中使用

   Vue
   深色版本
   <template>
     <input v-focus />
   </template>
   
   <script>
   export default {
     name: 'MyComponent'
   };
   </script>
   

局部自定义指令

如果你只想在某个组件内使用自定义指令，可以在该组件的选项中定义它。

1. 在组件内部定义指令

   Vue
   深色版本
   <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 钩子中可用。

示例：带参数和修饰符的自定义指令

假设我们需要一个自定义指令，它根据参数决定是否给元素添加点击事件，并且可以根据修饰符决定点击时是显示还是隐藏元素。

1. 定义指令

   Javascript
   深色版本
   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';
         }
       });
     }
   });
   

2. 在模板中使用

   Vue
   深色版本
   <template>
     <button v-click-toggle:hide>点击隐藏我</button>
     <button v-click-toggle:show>点击显示我</button>
   </template>
   

通过以上步骤，你就可以在 Vue 3 项目中创建和使用自定义指令了。这些指令可以极大地简化DOM操作，使代码更加简洁和易于维护。