vue3中使用自定义指令`directive`简单的实现按钮权限控制

vue3中使用自定义指令directive简单的实现按钮权限控制

我这里是将自定义指令定义到全局中的代码如下main.js：

import { createApp } from 'vue'
const app = createApp(App)
//自定义指令
app.directive('buttonAuth', {
    mounted: (el, binding) => {
        let permissionList = {
            admin: [1, 2, 3],//超级管理员
            user: [1, 2],//普通用户
            visitor: [1],//游客
        }
        //当前的用户类型
        let typeNow = 'user'
        //判断后作出对应的操作
        if (!permissionList[typeNow].includes(binding.value.type)) {
            el.remove()
        }

    }
})
app.mount('#app')

在组件中使用代码如下components.vue：

<template>
    <div>
        <button  v-buttonAuth="{ type: 1 }">成功</button>
        <button  v-buttonAuth="{ type: 2 }" >警告</button>
        <button  v-buttonAuth="{ type: 3 }">危险</button>
    </div>
</template>

使用自定义指令后会页面会根据不同的用户，呈现不同的内容。