import type { DirectiveBinding } from 'vue'
// 判断是否有权限
const hasPermission = (value: string) => {
console.log(value, 'value')
// todo... 在这里面判断权限true还是false
return value
}
// 删除节点
const removeEl = (el: Record<string, any>) => {
// 在绑定元素上存储父级元素
el._parentNode = el.parentNode
// 在绑定元素上存储一个注释节点
el._placeholderNode = document.createComment('auth')
// 使用注释节点来占位
el.parentNode?.replaceChild(el._placeholderNode, el)
}
// 添加节点
const addEl = (el: Record<string, any>) => {
// 替换掉给自己占位的注释节点
el._parentNode?.replaceChild(el, el._placeholderNode)
}
export const auth = {
// 渲染完毕
mounted(el: HTMLElement, binding: DirectiveBinding) {
// 无权限则移除当前元素
if (!hasPermission(binding.value)) {
el.parentNode?.removeChild(el)
}
},
// 权限变化重新判断元素渲染
updated(el: Record<string, any>, binding: DirectiveBinding) {
const valueNotChange = binding.value === binding.oldValue
const oldHasPermission = hasPermission(binding.oldValue)
const newHasPermission = hasPermission(binding.value)
const permissionNotChange = oldHasPermission === newHasPermission
if (valueNotChange && permissionNotChange) return
if (newHasPermission) {
addEl(el)
} else {
removeEl(el)
}
}
}
Vue3封装自定义指令方式控制按钮权限
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 理解什么是自定义指令： 指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能...
