什么是自定义指令
在vue开发中，平时比较常用的指令主要有v-for、v-if、v-model、v-show等等。vue也允许自定义指令，有时候在项目中需要直接对dmo元素进行底层操作，这个时候就需要使用到自定义指令。
自定义指令钩子函数
- inserted：被绑定元素插入父节点时调用（前提是父节点一定存在）
- bind： 指令绑定到元素时调用（只会被调用一次）
- update：所在组件的 VNode 更新时调用，但是被调用时间也可能发生在 VNode 更新之前。
- componentUpdated：所在组件VNode与其子VNode更新完成之后调用。
- unbind：指令与元素解绑时被调用（也只被调用一次）
钩子函数参数：
- el: 指令所绑定的元素，可以直接用来操作dmo。
- binding：一个对象，包含几个属性：
name: 指令的名称，但不包括v-前缀。 value：指令绑定的值，例如：v-permission="list"，绑定的值为list。oldValue：绑定的前一个值，仅能在update与componentUpdate中可用。expression：绑定值的字符串形式，v-permission="list"，值为list。arg:传递给指令的参数，v-permission:list,arg的值为list。
-
VNode:vue 编译时生成的虚拟节点。
-
oldVNode：上一次生成的虚拟节点，仅在update与componentUpdate中使用。
注册全局指令
在项目中，有时候对权限操作，就会使用到自定义的指令，比如：有些用户只有查看权限，而有些用户有编辑，删除等权限。这个时候通过指令去匹配，不在这个匹配范围内，就删除这个节点。
// store.getters.accountRole 后端返回的权限列表，也可由前端自己定义
Vue.directive('permission', {
inserted(el, binding) {
const { value } = binding;
const role = store.getters && store.getters.accountRole;
if (value) {
if (role.superior) return;
const hasPermission = role.permissions.some(permission => permission === value)
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`need role! Like v-permission="ent:proj:list"`)
}
}
})
在组件中使用指令
只需要在需要进行权限控制的标签上加上自定义的指令 v-permission，绑定上对应的权限值既可。
<el-button @click="onBatchPay",type="success",v-permission="'ent:salary:pay'"> 删除</el-button>
