当前位置:   article > 正文

Vue自定义指令实现按钮级的权限控制_vue按钮权限自定义指令

vue按钮权限自定义指令

提示:原文参考链接*且听风吟


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

提示:钩子函数:

自定义指令有五个生命周期(也叫钩子函数),分别是:bind,inserted,update,componentUpdated,unbind

  • bind:只调用一次,指令第一次绑定到元素时调用。用这个钩子函数可以定义一个绑定时执行一次的初始化设置。( bind 时父节点为null,因为 bind 是在 dom 树绘制前调用)

  • inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中,在 dom 树绘制后调用)。

  • update:被绑定于元素所在的模板 vNode 更新时调用,但是可能发生在其子 vNode
    更新之前。指令的值可能发生了改变,也可能没有。可以通过比较更新前后的绑定值,来忽略不必要的模板更新。

  • componentUpdated:被绑定元素所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind:只调用一次,指令与元素解绑时调用。


提示:以下是本篇文章正文内容,下面案例可供参考

二、钩子函数参数?

钩子函数参数说明,自定义指令中传递的常用参数:

  1. el: 指令所绑定的元素,可以用来直接操作 DOM。
  2. 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;
    }
}
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

引入组件

在入口文件 src\main.js 里面引入自定义指令:

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

  • 1
  • 2
  • 3

使用组件

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

<el-button @click='delHandle' type="primary" v-permission="'delete'">删除</el-button>
  • 1
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/正经夜光杯/article/detail/774069
推荐阅读
相关标签
  

闽ICP备14008679号