fix: the problem that v-auth directive doesn't take effect in native html element; 🐛

修复:v-auth 指令在原生 HTML 元素上不生效的 bug;
This commit is contained in:
iczer
2020-08-05 10:11:52 +08:00
parent a7ac5f8019
commit 25a1a2582a
3 changed files with 22 additions and 18 deletions

View File

@@ -42,33 +42,33 @@ const auth = function(authConfig, permission, role, permissions, roles) {
return false
}
/**
* 阻止的 click 事件监听
* @param event
* @returns {boolean}
*/
const preventClick = function (event) {
event.preventDefault()
event.stopPropagation()
return false
}
const checkInject = function (el, binding,vnode) {
const type = binding.arg
const check = binding.value
const instance = vnode.context
const $auth = instance.$auth
if (!$auth || !$auth(check, type)) {
el.classList.add('disabled')
el.setAttribute('title', '无此权限')
el.addEventListener('click', preventClick, true)
addDisabled(el)
} else {
el.classList.remove('disabled')
el.removeAttribute('title')
el.removeEventListener('click', preventClick, true)
removeDisabled(el)
}
}
const addDisabled = function (el) {
if (el.tagName === 'BUTTON') {
el.setAttribute('disabled', 'disabled')
} else {
el.classList.add('disabled')
}
el.setAttribute('title', '无此权限')
}
const removeDisabled = function (el) {
el.classList.remove('disabled')
el.removeAttribute('disabled')
el.removeAttribute('title')
}
const AuthorityPlugin = {
install(Vue) {
Vue.directive('auth', {
@@ -77,6 +77,9 @@ const AuthorityPlugin = {
},
update(el, binding,vnode) {
checkInject(el, binding, vnode)
},
unbind(el) {
removeDisabled(el)
}
})
Vue.mixin({