vue项目对单个按钮进行权限控制

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

参数说明：

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含以下 property：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

这里我是在localStorage缓存中拿到permissions权限集，来和页面中传值作比对，返回一个Boolearn值来控制按钮的显隐关系。

import Vue from "vue";
Vue.directive('permission', {
    inserted: function(el, bindings, vnode) {
        let btnPermissionValue = bindings.value;
        let PermissionSet = JSON.parse(localStorage.getItem("userInfo")).permissions;
        let boolean = PermissionSet.includes(btnPermissionValue);
        !boolean && el.parentNode.removeChild(el);
    }
})

这里需要在main.js全局注册这个指令事件，在页面用用v-xxx来控制显隐关系，具体实现如下

//main.js引入指令事件
import "@/directives/v-permission";

//代码块中运用
<el-link v-permission="'edu:salary:audit-setting'">审核设置</el-link>

了解更多：自定义指令 — Vue.js