自定义指令

自定义指令 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>