控制按钮权限本质上是配合权限数据控制按钮的显示和隐藏
v-if/v-show 控制显示和隐藏 v-if
直接操作dom 指令 -> 自定义指令 el -> 原生的dom
定义全局指令 directive/index.js
// 放置全局指令
import store from '@/store'
// 1. 熟悉自定义指令的语法
// 2. 编写一个无逻辑但是可以运行的自定义指令
// 3. 添加按钮的权限控制逻辑
// 4.思考一下如何把当前的写法改造成插件的写法?
// 函数定义法写插件 -> 函数本身会被当成install方法自动执行
const directivePlugin = {
install(Vue) {
Vue.directive('checkBtn', {
inserted(el, binding) {
// el: 指令绑定的那个元素对象 dom
// binding.value: 指令等于号后面绑定的表达式的值 v-if="xxx"
// 拿到el 拿到value 配合权限数据 做按钮显示隐藏控制
// 控制逻辑: 判断当前的按钮自身的权限标识能否在后端返回的points中找到 如果找到 证明要显示
// 如果找不到 证明要隐藏
// 1. 权限数据 -> points
// 2. binding.value -> 按钮自身的标识
const points = store.state.user.userInfo.roles.points
if (!points.includes(binding.value)) {
// 把当前的按钮移除
// 移除eldom 1. remove() 2. 先找到父节点 removeChild
el.remove()
}
}
})
}
}
export default directivePlugin
main
// 导入全局指令运行
import directivePlugin from './directive'
Vue.use(directivePlugin)
使用全局指令
<!-- CKGZ -->
<el-button v-checkBtn="'CKGZ'">查看工资</el-button>
<!-- XGGZ -->
<el-button v-checkBtn="'XGGZ'">修改工资</el-button>