Vue3后台管理系统（九）自定义指令

分手后的思念是犯贱 2024-03-26 12:18 58阅读 0赞

**目录**

一、定义

二、声明周期

三、钩子参数

四、全局注册

五、封装鉴权指令

--------------------

#### 一、定义 ####

**①**一个自定义指令由一个包含类似组件生命周期**钩子的对象**来定义。钩子函数会接收到指令**所绑定元素作为其参数**。  
②**在setup中**，任何**以 v 开头的驼峰式命名**的变量都可以被用作一个自定义指令。在上面的例子中，vFocus 即可以在模板中以 v-focus 的形式使用。

**例**：页面加载时输入框自动聚焦：

<script setup lang="ts">
    
    const vFocus = {
      mounted: (el: HTMLElement, binding: any) => {
        // 指令绑定的元素
        console.log(typeof el);
        console.log(el);
        // 指令绑定的参数
        console.log(binding)
    
        // 如果是输入框
        if (el instanceof HTMLInputElement) {
          // 元素聚焦
          el.focus();
          el.placeholder = '请输入';
          el.value = '勤奋、努力'
        }else if (el instanceof HTMLAnchorElement) {
          // 如果是<a>标签我们就导向 百度翻译
          el.href='https://fanyi.baidu.com/'
        }
      }
    }
    </script>
    
    <template>
      <input v-focus/>
      <p/>
      <a v-focus href="https://www.baidu.com/">百度一下，你就知道</a>
    </template>

温馨提示：上例中的自定义指令绑定el-input是不生效的，因为el-input标签的dom结构首层是div而不是input 。

#### 二、生命周期 ####

const myDirective = {
      // 在绑定元素的 attribute 前
      // 或事件监听器应用前调用
      created(el, binding, vnode, prevVnode) {
        // 下面会介绍各个参数的细节
      },
      // 在元素被插入到 DOM 前调用
      beforeMount(el, binding, vnode, prevVnode) {},
      // 在绑定元素的父组件
      // 及他自己的所有子节点都挂载完成后调用
      mounted(el, binding, vnode, prevVnode) {},
      // 绑定元素的父组件更新前调用
      beforeUpdate(el, binding, vnode, prevVnode) {},
      // 在绑定元素的父组件
      // 及他自己的所有子节点都更新后调用
      updated(el, binding, vnode, prevVnode) {},
      // 绑定元素的父组件卸载前调用
      beforeUnmount(el, binding, vnode, prevVnode) {},
      // 绑定元素的父组件卸载后调用
      unmounted(el, binding, vnode, prevVnode) {}
    }

#### 三、钩子参数 ####

el：指令绑定到的元素。这可以用于直接操作 DOM。
    binding：一个对象，包含以下属性:
      value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
      oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
      arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
      modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
      instance：使用该指令的组件实例。
      dir：指令的定义对象。
    vnode：代表绑定元素的底层 VNode。
    prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

#### 四、全局注册 ####

import {createApp} from 'vue'
    import App from './App.vue'
    
    
    const app = createApp(App);
    
    app.directive('focus', {
        mounted: (el: any, binding: any) => {
            el.focus()
        }
    })
    app.mount('#app');

#### 五、封装鉴权指令 ####

三个指令：**权限鉴定**、**角色鉴定**、**按钮防抖**

在src下新建directive文件夹并在directive文件夹下新建index.ts;  
在到directive文件夹下新建permission文件夹，在permission文件夹下新建index.ts;  
在directive文件夹下新建utils文件夹，并在utils文件夹下新建index.ts文件;

// src/directive/permission/index.ts
    import { useUserStoreHook } from '@/store/modules/user';
    import { Directive, DirectiveBinding } from 'vue';
    
    /**
     * 按钮权限校验
     */
    export const hasPerm: Directive = {
      mounted(el: HTMLElement, binding: DirectiveBinding) {
        // 「超级管理员」拥有所有的按钮权限
        const { roles, perms } = useUserStoreHook();
        if (roles.includes('ROOT')) {
          return true;
        }
        // 「其他角色」按钮权限校验
        const { value } = binding;
        if (value) {
          const requiredPerms = value; // DOM绑定需要的按钮权限标识
    
          const hasPerm = perms?.some(perm => {
            return requiredPerms.includes(perm);
          });
    
          if (!hasPerm) {
            el.parentNode && el.parentNode.removeChild(el);
          }
        } else {
          throw new Error(
            "need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\""
          );
        }
      }
    };
    
    /**
     * 角色权限校验
     */
    export const hasRole: Directive = {
      mounted(el: HTMLElement, binding: DirectiveBinding) {
        const { value } = binding;
    
        if (value) {
          const requiredRoles = value; // DOM绑定需要的角色编码
          const { roles } = useUserStoreHook();
          const hasRole = roles.some(perm => {
            return requiredRoles.includes(perm);
          });
    
          if (!hasRole) {
            el.parentNode && el.parentNode.removeChild(el);
          }
        } else {
          throw new Error("need roles! Like v-has-role=\"['admin','test']\"");
        }
      }
    };

// src/directive/utils/index.ts
    import { Directive, DirectiveBinding } from 'vue';
    
    /**
     * 按钮防抖
     */
    export const deBounce:Directive = {
      mounted(el:HTMLElement) {
        el.addEventListener('click', e => {
          el.classList.add('is-disabled')
          setTimeout(() => {
            el.classList.remove('is-disabled')
          }, 2000)
        })
      }
    }

// src/directive/index.ts
    export { hasPerm, hasRole } from './permission';
    export { deBounce } from './utils';

**使用案例**：

<script setup lang="ts">
    
    </script>
    
    <template>
      <el-button v-hasPerm="['user:delete']">确认</el-button>
      <el-button >取消</el-button>
    </template>