Vue自定义指令实现按钮级的权限控制的示例代码

一、自定义指令—钩子函数

自定义指令有五个生命周期（也叫钩子函数），分别是：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 里面引入自定义指令：

import permission './directive/permission'
Vue.use(permission)

使用组件

在使用的页面，按钮中只需引用v-operate指令，赋值判断即可：

<el-button @click='delHandle' type="primary" v-permission="'delete'">删除</el-button>

到此这篇关于Vue自定义指令实现按钮级的权限控制的示例代码的文章就介绍到这了,更多相关Vue 按钮权限控制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！