自定义指令
自定义指令 v-hasPermi
export function hasPermi(app: App<Element>) {app.directive('hasPermi', (el, binding) => {// 获取指令的值 例如 v-hasPetmi = "['del']"的值就是 ['del']const { value } = binding//获取所有权限const permissions = xxxx// 判断传递的参数是否符合要求，不符合，抛出错误if (value && value instanceof Array && value.length > 0) {const permissionFlag = value//当前权限是否在所有的权限列表中const hasPermissions = permissions.some((permission: string) => {//这个例子只展示处理单个权限的，有多个权限的略。// 也可以设置用于多个权限的字段进行比较，例如 allPermission allPermission === permission || permissionFlag.includes(permission)return permissionFlag.includes(permission)})//没有权限if (!hasPermissions) {el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error('具体原因')}})
}app.directive() 参数解析
Vue 3 的指令包含以下生命周期钩子:
| 钩子函数 | 调用时机 |
|---|---|
created | 元素属性绑定前，但尚未挂载到 DOM。 |
beforeMount | 元素挂载到 DOM 前。 |
mounted | 元素挂载到 DOM 后（最常用）。 |
beforeUpdate | 元素更新前（仅当绑定的值变化时触发）。 |
updated | 元素更新后。 |
beforeUnmount | 元素卸载前。 |
unmounted | 元素卸载后。 |
app.directive('log', {created(el, binding) {console.log('Created:', binding.value);},mounted(el, binding) {console.log('Mounted:', binding.value);},updated(el, binding) {console.log('Updated:', binding.value);}...
});一般常用的只有mounted ,updated这些，可以简写为:
app.directive('mouse',(el,binding)=>{console.log(binding.value);
})
钩子函数的第二个参数 binding 包含以下属性：
| 属性 | 描述 |
|---|---|
value | 指令绑定的值（如 v-my-directive="42" 中的 42）。 |
oldValue | 更新前的值（仅在 beforeUpdate 和 updated 中可用）。 |
arg | 指令的参数（如 v-my-directive:arg 中的 "arg"）。 |
modifiers | 修饰符对象（如 v-my-directive.modifier 中的 { modifier: true }）。 |
instance | 当前组件实例。 |
dir | 指令的定义对象。 |
app.directive('color', {mounted(el, binding) {// v-color:bg="'red'" → 设置背景色// v-color:text="'blue'" → 设置文字颜色if (binding.arg === 'bg') {el.style.backgroundColor = binding.value;} else if (binding.arg === 'text') {el.style.color = binding.value;}}
});在模板中使用：
<div v-color:bg="'lightgreen'">背景色</div>
<div v-color:text="'red'">文字颜色</div>