Vue3封装自定义指令方式控制按钮权限

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)
        }
    }
}