控制按钮权限本质上是配合权限数据控制按钮的显示和隐藏   

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>