自定义指令
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('请设置角色权限标签值'); // 如果没有设置角色值，则抛出错误
}
}
}同样，上述代码是假设性的，并且可能需要根据实际的项目结构和需求进行调整。
总结
在若依框架中，v-hasPermi和v-hasRole是两个重要的自定义指令，它们通过Vue的自定义指令机制，结合Vuex或类似的状态管理库，实现了基于权限和角色的元素显示控制。这种机制有助于提高前端页面的安全性和用户体验，确保用户只能看到和操作他们被授权访问的内容。