Vue自定义指令以及项目中封装过的自定义指令

news2024/12/24 18:26:16

自定义指令

Vue 自定义指令是 Vue.js 框架中一个非常强大的功能，它允许你注册一些全局或局部的自定义 DOM 操作指令，以便在模板中复用。自定义指令通过 Vue.directive() 方法进行全局注册，或者在组件的 directives 选项中局部注册。

自定义指令的钩子函数

Vue 自定义指令可以包含几个钩子函数（也称为生命周期钩子），这些函数会在不同的时间点被调用：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用（保证父节点存在，但不一定已被插入文档中）。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：被绑定元素所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

注册自定义指令

全局注册

Vue.directive('my-directive', {  
  bind(el, binding, vnode, oldVnode) {  
    // 逻辑...  
  },  
  // 其他钩子...  
});

局部注册

export default {  
  directives: {  
    focus: {  
      // 指令的定义  
      inserted: function (el) {  
        el.focus();  
      }  
    }  
  }  
}

钩子函数的参数

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下属性：
- value：指令的绑定值，例如 v-my-directive="1 + 1" 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。
- expression：字符串形式的指令表达式。例如 v-my-directive="someValue" 中，表达式为 "someValue"。
- arg：传给指令的参数，可选。例如 v-my-directive:arg="value" 中，参数为 "arg"。
- modifiers：一个包含修饰符的对象。例如 v-my-directive.modifier，修饰符对象 modifiers 的 modifier 属性为 true。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

使用自定义指令

在模板中，你可以这样使用自定义指令

<div v-my-directive="someValue"></div>

或者，如果指令需要参数或修饰符：

<div v-my-directive:arg.modifier="value"></div>

Vue.directive('color-switch', {  
  // 当绑定元素插入到 DOM 中...  
  inserted: function (el, binding) {  
    // 根据绑定值来更改元素的颜色  
    el.style.color = binding.value;  
  },  
  // 当绑定值更新时...  
  update: function (el, binding) {  
    // 同样地，更改元素的颜色  
    el.style.color = binding.value;  
  }  
});  
  
// 然后在模板中使用它  
<span v-color-switch="'red'">这是红色的文本</span>

项目中使用封装的自定义指令

在若依（RuoYi）框架中，除了假设的v-focus示例外，实际上框架中常用的自定义指令主要围绕权限控制进行设计，如v-hasPermi和v-hasRole。这些指令在Vue前端中用于根据用户的权限或角色来决定是否显示某个元素或组件。

自定义指令详解

1. v-hasPermi

原理：

v-hasPermi指令用于控制元素的显示与隐藏，基于用户的操作权限。当绑定的权限值与用户实际拥有的权限匹配时，元素会显示；否则，元素会被隐藏或移除。

代码解析：

// 假设的v-hasPermi指令定义  
export default {  
  mounted(el, binding, vnode) {  
    const { value } = binding; // 获取指令绑定的值（权限字符串数组）  
    const permissions = useUserStore().permissions; // 从Vuex或类似的状态管理中获取用户权限  
  
    if (value && value instanceof Array && value.length > 0) {  
      const hasPermissions = permissions.some(permission => {  
        // 检查用户是否拥有任意一个指定的权限  
        return permission === "*:*:*" || value.includes(permission);  
      });  
  
      if (!hasPermissions) {  
        el.parentNode && el.parentNode.removeChild(el); // 如果没有权限，则移除元素  
      }  
    } else {  
      throw new Error('请设置操作权限标签值'); // 如果没有设置权限值，则抛出错误  
    }  
  }  
}

注意：上述代码是假设性的，并且mounted钩子可能不是最适合的（因为Vue自定义指令通常使用inserted或bind钩子），但这里为了说明原理而使用。实际上，v-hasPermi可能使用inserted或bind钩子来确保在元素插入DOM后立即执行权限检查。

2. v-hasRole

原理：

与v-hasPermi类似，v-hasRole指令用于根据用户的角色来控制元素的显示与隐藏。当绑定的角色值与用户实际拥有的角色匹配时，元素会显示；否则，元素会被隐藏或移除。

代码解析（假设性）：

// 假设的v-hasRole指令定义  
export default {  
  mounted(el, binding, vnode) {  
    const { value } = binding; // 获取指令绑定的值（角色字符串数组）  
    const roles = useUserStore().roles; // 从Vuex或类似的状态管理中获取用户角色  
  
    if (value && value instanceof Array && value.length > 0) {  
      const hasRole = roles.some(role => {  
        // 检查用户是否拥有任意一个指定的角色  
        return role === "admin" || value.includes(role);  
      });  
  
      if (!hasRole) {  
        el.parentNode && el.parentNode.removeChild(el); // 如果没有对应角色，则移除元素  
      }  
    } else {  
      throw new Error('请设置角色权限标签值'); // 如果没有设置角色值，则抛出错误  
    }  
  }  
}

同样，上述代码是假设性的，并且可能需要根据实际的项目结构和需求进行调整。