自定义指令

在 Vue 中封装自定义指令（Custom Directives）是实现 DOM 底层操作、复用逻辑的有效方式。Vue 3 的语法较 Vue 2 更加简洁，且与组件生命周期更加一致。

1. 核心钩子函数

自定义指令提供了一系列生命周期钩子（常用）：

• created: 在绑定元素的 attribute 前或事件监听器应用前调用。
• mounted: 当元素被插入到 DOM 中时调用。
• updated: 在包含组件的 VNode 更新后调用。
• unmounted: 在指令从元素上解绑时调用。

2. 封装步骤：以“权限控制”为例

假设你需要封装一个 v-permission 指令，用于根据用户权限决定是否移除 DOM 元素。

第一步：创建指令文件 (src/directives/permission.js)

JavaScript

export default {
  mounted(el, binding) {
    const { value } = binding; // 获取指令绑定的值
    const userPermissions = ['admin', 'editor']; // 这里模拟从 store 获取权限

    if (value && !userPermissions.includes(value)) {
      // 如果没有权限，直接从 DOM 中移除该元素
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
};

第二步：全局注册 (src/main.js)

JavaScript

import { createApp } from 'vue';
import App from './App.vue';
import permission from './directives/permission';

const app = createApp(App);

// 注册全局自定义指令 v-permission
app.directive('permission', permission);

app.mount('#app');

3. 在组件中使用

注册完成后，你可以像使用内置指令 (v-if, v-model) 一样在任何模板中使用它：

HTML

<template>
  <div>
    <button v-permission="'admin'">管理员按钮</button>
    <button v-permission="'editor'">编辑按钮</button>
    <button v-permission="'guest'">游客按钮（将被隐藏）</button>
  </div>
</template>