vue directive全局自定义指令实现按钮级别权限控制的操作方法
目录
在日常项目中，通常会需要根据后台接口返回的数据，来判断当前用户的按钮操作权限。对于当前登录用户来说，只有在当前按钮有该权限时，才显示此按钮；当前按钮没有这个权限时，就不显示这个按钮。针对这种场景，可以通过 Vue.directive 自定义全局注册指令来进行按钮级别权限控制。
概念
除了默认设置的核心指令( v-model 和 v-show ), vue 允许注册自定义指令，可以对普通 DOM 元素进行底层操作。这是一种有效的的补充和扩展，不仅可以用于定义任何的 dom 操作，而且是可以复用的。
注册一个自定义指令分为：
1）全局注册
2）局部注册
全局自定义指令
Vue.directive：用于全局注册或获取全局指令，该指令可以写一个自定义的事件。
Vue.directive(el, hooks)
参数一（el）：自定义指令的名称
参数二（hooks）：自定义指令的钩子函数对象
局部自定义指令
局部自定义指令是一个对象，对象的属性是自定义指令的名称，对象中属性的值是自定义指令的钩子函数对象。如下：
<template>
<div></div>
</template>
<script>
export default {
directives: {
// 属性名称是自定义的指令名称
// 属性值是自定义指令的钩子函数对象
name: {
}
}
}
</script>自定义指令钩子函数以及钩子函数的参数
Vue.directive('permission', {
bind: function (el, binding, vnode) {},
inserted: function (el, binding, vnode) {},
update: function (el, binding, vnode, oldVnode) {},
componentUpdated: function (el, binding, vnode, oldVnode) {},
unbind: function (el, binding, vnode) {}
})钩子函数
自定义指令有五个生命周期（也叫钩子函数），分别是：bind,inserted,update,componentUpdated,unbind。
bind：只调用一次，指令第一次绑定到元素时调用。用这个钩子函数可以定义一个绑定时执行一次的初始化设置。（bind时父节点为null，因为bind是在dom树绘制前调用）inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中，在dom树绘制后调用）。update：被绑定于元素所在的模板vNode更新时调用，但是可能发生在其子vNode更新之前。指令的值可能发生了改变，也可能没有。可以通过比较更新前后的绑定值，来忽略不必要的模板更新。componentUpdated：被绑定元素所在组件的VNode及其子VNode全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。 钩子函数参数说明
自定义指令中传递的常用参数：
el： 指令所绑定的元素，可以用来直接操作DOM。binding： 一个对象，包含指令的很多信息。如下：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 }。
vnode：Vue编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
除了 el 之外，其它参数都应该是只读的。
全局自定义指令项目应用
应用场景：自定义一个权限指令，对需要权限判断的 Dom 进行显示隐藏。
后端接口返回的权限数据结构为：
{“search”:“搜索”,“create”:“新增新闻”,“edit”:“编辑”,“enable”:“置顶”,“forbidden”:“取消置顶”,“delete”:“删除”}
实现原理：
在 el-button 按钮上设置标签数值，利用 vue 的指令功能获取按钮实例对象和按钮上绑定的标签数值，与从接口拿到的按钮权限数据进行匹配，如果匹配成功，证明用户拥有该按钮的使用权限，如果发现没有使用权限，则在指令处理函数中编写代码移除该按钮，界面上就看不到该按钮了。
在 src 目录下新建 directive 目录，在目录下新建 permission.js 文件：
const permission = {
// 全局注册自定义指令
install (Vue) {
// 使用 inserted 函数，在被绑定元素插入父节点时检测该元素是否有权限
Vue.directive('permission', {
inserted (el, binding, vnode) {
/*el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。*/
const path = window.location.hash.slice(1).split('?')[0]
const { value } = binding
// 自定义指令的执行函数，取到登录缓存的按钮权限数组
const power = JSON.parse(window.sessionStorage.power)
const operate = power[path] || {}
if (!operate[value]) {
// 判断是否有权限，如果没有权限，则删除该节点
el.parentNode && el.parentNode.removeChild(el)
}
}
})
}
}
export default permission在入口文件 src\main.js 里面引入自定义指令：
import permissionfrom './directive/permission' Vue.use(permission)
在使用的页面，按钮中只需引用v-operate指令，赋值判断即可：
<el-button @click='delHandle' type="primary" v-permission="'delete'">删除</el-button>
原文地址：https://blog.csdn.net/HH18700418030/article/details/128855140