美文网首页
vue自定义权限指令

vue自定义权限指令

作者: 香蕉不拿呢 | 来源:发表于2021-11-12 16:39 被阅读0次
/**
 * Action 权限指令
 * 指令用法:
 *  - 在需要控制 action 级别权限的组件上使用 v-action:[组件code] , 如下:
 *    <a-button v-action:[123]="'disable'">内容</a-button>
 *    <a-button v-action:124>内容</a-button>
 *  - 当前用户没有权限时,组件上使用了该指令则会被隐藏
 */

export default {
    install(Vue) {
        Vue.directive('action', {
            inserted: function (el, binding, vnode) {
                const _this = vnode.context;
                const code = binding.arg || ''
                const value = binding.value || ''
                const userPermission = _this.$store.getters["Permission/userPermission"];
                if (userPermission(code) && userPermission(code).isShow) {
                    return
                } else {
                    if(value == "disable"){
                        el.classList.add("disableAction")
                    }
                    else{
                        el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
                    }
                    
                }
            }
        })
    }
}

相关文章

  • 2019-10-25 vue前端按钮权限控制隐藏

    vue前端按钮权限控制隐藏权限控制描述如何实现1、储存权限数据2、权限判断方法3、设置vue自定义指令4、最终代码...

  • vue自定义指令

    呔, 用了俩年vue 竟然没怎么用过自定义指令, 面试问到了就找个几个常用的实现按钮权限的自定义指令 v-perm...

  • season2-全局API

    第1节:Vue.directive 自定义指令 Vue.directive自定义指令 自定义的指令:changec...

  • Vue div节点滚动事件-加载更多

    使用Vue.directive注册全局指令 绑定事件 对于Vue自定义指令不明白的同学请移步: Vue自定义指令 ...

  • VUE-2:自定义指令、事件

    directive自定义指令 我们还可以通过`Vue`提供的directive方法来自定义指令 注册指令 `vue...

  • vue入门6---vue基本指令、自定义指令、插件

    一、vue常用指令概览 二、vue自定义指令 注册全局指令Vue.directive('my-directive'...

  • vue权限管控permission实现

    vue项目实现不同用户角色权限管控: 第一种方式:自定义指令实现用户角色权限控制v-permission: 实现方...

  • vue自定义指令初探

    vue自定义指令初探 一、什么是自定义指令 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非...

  • vue 有自定义指令

    vue 的自定义指令,分为全局自定义指令和局部自定义指令,局部自定义指令等价于局部组件。 自定义指令可以对DOM进...

  • Vue中directives的用法

    import Vue from 'vue'/权限指令/const has = Vue.directive('has...

网友评论

      本文标题:vue自定义权限指令

      本文链接:https://www.haomeiwen.com/subject/morozltx.html