vue自定义指令实现按钮权限判断

1.在main.js里使用directive定义指令

const app = createApp(App);
//自定义指令，按钮权限
app.directive('has-permission', {
    /**
     *
     * @param el dom对象
     * @param bind 参数对象
     */
    beforeMount(el, bind) {
        console.log(el, bind)
        //获取按钮权限数据-home组件里已经保存在缓存中
        let actionList = storage.getItem("actionList")
        let value = bind.value
        //判断dom按钮上绑定的权限标识是否存在
        let hasPermission = actionList.includes(value)
        if (!hasPermission) {
            //隐藏dom
            el.style = 'display:none'
            setTimeout(() => {
                //删除dom元素
                el.parentNode.removeChild(el)
            }, 0)
        }
    }
})

2.在按钮上使用指令：v-has-permission="'权限标识'"

<div class="action">
  <el-button type="primary" @click="handleSave" v-has-permission="'user-create'">新增</el-button>
  <el-button type="danger" @click="batchUserDelete">批量删除</el-button>
</div>