vue自定义权限指令

2021-11-12  本文已影响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')
                    }
                    
                }
            }
        })
    }
}
上一篇 下一篇

猜你喜欢

热点阅读