vue2自定义指令控制功能权限

在main.js中加入如下的代码

//注册自定义指令 控制功能权限
Vue.directive('permission', {
  // 会在指令作用的元素插入dom之后执行
  inserted(el, binding) {
    // el是当前指令作用的dom元素的对象
    // binding v-permission = '表达式' 表达式的信息
    const points = store.state.user.userInfo?.roles?.points || []
    //拿到points
    // points中是否有add-permission
    // binding.value v-permission = '表达式'中表达式的值
    if (!points.includes(binding.value)) {
      // 删除或者禁用
      el.remove()
      // el.disabled = true //禁用
    }
  }
})

然后在需要控制显示隐藏的按钮处加上

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