自定义指令
我们首先看一下VUE官网对于自定义指令的介绍，在我们需要创建一个自定义指令时
操作权限 指令的添加
- 测试 内部指标配置 列表接口 指标公式 指标条件 查询version表中
- 操作权限（按钮级）思路
- 新增全局指令 通过指令的参数设置不同功能的按钮 binding.arg
- 请求到当前用户角色的操作权限的列表 接口只对设置 但 关闭的操作权限取反后的列表进行返回
- 获取到当前页路由地址 vnode.context.$route.path
- 进入指令方法 通过对象的属性去匹配权限列表的值，对匹配上的值进行隐藏（因为列表中为关闭了权限的数据）
import store from '@/store'
/**
* Action 权限指令
* 指令用法：
* - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
* <i-button v-action:add >添加用户</a-button>
* <a-button v-action:delete>删除用户</a-button>
* <a v-action:edit @click="edit(record)">修改</a>
*
* - 当前用户没有权限时，组件上使用了该指令则会被隐藏
* - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
*
*/
const action = Vue.directive('action', {
// 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置，比如样式设置等。
bind: (el, binding) => {
// el Dom 元素
// binding: {
// name: "copy" 指令名
// modifiers: {} // 修饰符的对象 例如 v-copy:foo.bar 修饰符对象为{ bar: true }
// def: { inserted: ?, bind: ? }
// rawName: "v-copy:a" //指令整体
// arg: "a" 传给指令的参数 v - copy: a
// expression: "day" 字符串形式的指令表达式
// value: 指令的绑定值，例如v-copy="1 + 1"中，绑定值为2
// }
},
// 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
// 这里一般执行和JS行为有关的操作，比如用来给元素添加一些监听事件
inserted: function (el, binding, vnode) {
const actionName = binding.arg
const elVal = vnode.context.$route.path
const btnAuth = store.getters.btnAuth
const permissionList = []
if(btnAuth[elVal] && btnAuth[elVal].length) {
btnAuth[elVal].forEach(item => {
permissionList.push(item.pageKey)
})
}
if(permissionList.includes(actionName)) {
el.style.display = 'none'
}
}
// 所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前，可多次触发。
// 指令的值可能发生了变化，也可能未变化，我们可以通过比较新旧VNode来做具体判断。
update(el,binding,vnode,oldVnode){
// vnode: {
// tag，当前节点标签名，这里需要注意的是文本也视为一个vnode，保存在children中，并且其tag值为undefined
// data，当前节点数据（VNodeData类型），class、id等HTML属性都放在了data中
// children，当前节点子节点
// text，节点文本信息
// elm，当前节点对应的真实DOM节点
// context，当前节点上下文，指向了Vue实例
// parent，当前节点父节点
// componentOptions，组件配置项
// }
},
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用
componentUpdated(el,binding,vnode,oldVnode){},
// 只调用一次，指令与元素解绑时调用
unbind(el,binding,vnode,oldVnode,status){}
},
注意
这里需要注意的是，在钩子函数中使用this关键字无法找到Vue实例，需要使用 vnode.context
