基于antdSignPro的权限控制实现方式，除了官网上的的直接隐藏/移除元素方式外，经过修改，此自定义指令也可适用于ant-design-vue的checkbox、tag、switch 以及一个页面使用同一组件的权限控制
import Vue from 'vue'
import store from '@/store'
const DISABLED_CLASS = {
'a-switch': 'ant-switch-disabled',
'a-checkbox': 'ant-checkbox-disabled'
}
const action = Vue.directive('action', {
inserted: function (el, binding, vnode) {
let actionName, actionType
let isObject = false
const action = binding.arg || binding.value
const elVal = vnode.context.$route.meta.permission
if (typeof action === 'object') {
actionName = action.key
actionType = action.type
isObject = true
} else {
actionName = action
isObject = false
}
if (elVal.indexOf(actionName) === -1) {//没有该权限
if (isObject) {
if (actionType === 'tag') {
el.removeChild(el.childNodes[el.childNodes.length - 1])
} else {
el.disabled = true
const elType = vnode.componentOptions.tag
if (DISABLED_CLASS[elType]) {
el.classList.add(DISABLED_CLASS[elType])
}
if (elType == 'a-checkbox') {
el.childNodes[0].childNodes[0].setAttribute('disabled', 'disabled')
el.childNodes[0].classList.add('ant-checkbox-disabled')
}
}
} else {
el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
}
} else {
return
}
}
})
export default action
使用说明：
- Action 权限指令
- 指令用法：
- 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
- 普通权限控制（直接删除或隐藏该节点）
<a-tooltip v-action:addUserRole>
<template slot="title">添加角色</template>
<a-icon type="plus" @click="addRole(action)" />
</a-tooltip>
- 组件复用时
<a-button v-action="type+'RunFailed'" @click="excuate(1)">只执行失败任务</a-button> - type为使用该组件界面定义的变量特殊情况（非隐藏或直接删除该节点）
- tag的权限控制
<a-tag v-action="{key:'deleteUserRole',type:'tag'}">选择</a-tag> - switch的权限控制
<a-switch v-action="{key:'lockUser',type:'disabled'}" /> - checkbox的权限控制
<a-checkbox v-action="{key:'updateRoleAction',type:'disabled'}" >选择</a-checkbox>
