权限应用-按钮权限标识利用自定义指令控制按钮

1.在main.js之中定义自定义指令

// 封装自定义指令 用来控制操作权
Vue.directive('permission', {
        // 会在指令作用的元素插入到页面完成以后触发
        inserted(el, binding) {
        // el 指的是作用的元素的dom对象
         // binding是v-permission="表达式"中的表达式的值，例如add-employee等
        console.log(el)
        const points = store.state.user.userInfo?.roles?.points || [] // 当前用户信息的操作权
        if (!points.includes(binding.value)) {
        // 不存在就要删除或者禁用
        el.remove() // 删除元素
        // el.disabled = true
        // 线上的权限数据和线下的代码进行对应
        }
        }

        })

2.页面应用该指令

应用自定义指令-代码位置(**src/views/employee/index.vue**)

<el-button v-permission="'add-employee'" size="mini" type="primary" @click="$router.push('/employee/detail')">添加员工</el-button>