提示：原文参考链接＊且听风吟
一、自定义指令—钩子函数
提示：钩子函数：
自定义指令有五个生命周期（也叫钩子函数），分别是：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 之外，其它参数都应该是只读的。
三、全局自定义指令
实现原理
在 el-button 按钮上设置标签数值，利用 vue的指令功能获取按钮实例对象和按钮上绑定的标签数值，与从接口拿到的按钮权限数据进行匹配，如果匹配成功，证明用户拥有该按钮的使用权限，如果发现没有使用权限，则在指令处理函数中编写代码移除该按钮，界面上就看不到该按钮了。
封装组件
在 src 目录下新建 directive 目录，在目录下新建 permission.js 文件：
代码如下：
import Vue from 'vue';
// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export const permissions = Vue.directive('permission',{
/**
* inserted：被绑定元素插入父节点时调用
* el：指令所绑定的元素，可以用来直接操作 DOM
* binding.value：指令的绑定值，例如：v-directive="10" 中，绑定值为 10。
*/
inserted(el,binding){
let buttonKey = binding.value;
// 代表某个元素需要通过权限验证
if(buttonKey){
let key = checkKey(buttonKey)
if(!key){//没有权限
el.remove() //删除按钮
}
}else{
throw new Error('缺少唯一指令')
}
},
})
// 检测传入的元素key是否可以显示
function checkKey(key) {
// 获取权限数组
let permissionData = sessionStorage.getItem("permissionData") ? sessionStorage.getItem("permissionData") : [] ;
//如果传入的元素key不在权限数组里，则不可显示
let index = permissionData.indexOf(key)
if(index > -1) {
return true;
}else{
return false;
}
}
引入组件
在入口文件 src\main.js 里面引入自定义指令：文章来源：https://www.toymoban.com/news/detail-499607.html
import permission './directive/permission'
Vue.use(permission)
使用组件
在使用的页面，按钮中只需引用v-operate指令，赋值判断即可：文章来源地址https://www.toymoban.com/news/detail-499607.html
<el-button @click='delHandle' type="primary" v-permission="'delete'">删除</el-button>
到了这里，关于Vue自定义指令实现按钮级的权限控制的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
