目录
一、定义
二、声明周期
三、钩子参数
四、全局注册
五、封装鉴权指令
一、定义
①一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
②在setup中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中，vFocus 即可以在模板中以 v-focus 的形式使用。
例：页面加载时输入框自动聚焦：
<script setup lang="ts">
const vFocus = {
// 组件挂载完成后调用
mounted: (el: any, binding: any) => {
el.focus()
}
}
</script>
<template>
<input v-focus/>
</template><!--src/App.vue-->
<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');<script setup lang="ts">
</script>
<template>
<input v-focus/>
</template>五、封装鉴权指令
三个指令：权限鉴定、角色鉴定、按钮防抖
在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';使用案例：
<!--src/App.vue-->
<script setup lang="ts">
</script>
<template>
<el-button v-hasPerm="['user:delete']">确认</el-button>
<el-button >取消</el-button>
</template>
