概念
Vue除了提供了默认内置的指令外,还允许开发人员根据实际情况自定义指令,它的作用价值在于,在某些场景下需要对普通DOM元素进行操作的逻辑进行复用。
生命周期
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update
:所在组件的 VNode 更新时调用。componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind
:只调用一次,指令与元素解绑时调用。
常见的指令
图片懒加载、长按、按钮权限、拖拽指令、鼠标操作等
按钮权限自定义指令
// permission.ts
// 引入vue中定义的指令对应的类型定义
import { Directive } from 'vue'
export const permission: Directive = {
// mounted是指令的一个生命周期
mounted(el, binding) {
// value 获取用户使用自定义指令绑定的内容
const { value } = binding
// 获取用户所有的权限按钮
const permissionBtn = sessionStorage.getItem('permission')
// 判断用户使用自定义指令,是否使用正确了
if (value && value instanceof Array && value.length > 0) {
const permissionFunc = value
//判断传递进来的按钮权限,用户是否拥有
//Array.some(), 数组中有一个结果是true返回true,剩下的元素不会再检测
const hasPermission = permissionBtn.some((role: any) => {
return permissionFunc.includes(role)
})
// 当用户没有这个按钮权限时,设置隐藏这个按钮
if (!hasPermission) {
el.style.display = 'none'
}
} else {
throw new Error('need roles! Like v-permission="[\'admin\',\'editor\']"')
}
}
}
// 注意,我们这里写的自定义指令,传递内容是一个数组,也就说,按钮权限可能是由
// 多个因素决定的,如果你的业务场景只由一个因素决定,自定义指令也可以不传递一个数组,
// 只传递一个字符串就可以了