最近做项目,客户要求做用户-角色-按钮权限,我是用自定义指令来实现的,代码如下:
import Vue from 'vue'
/**权限指令**/
Vue.directive('has', {
bind: function (el, binding) {
debugger
if (!Vue.prototype.$_has(binding.value)) {
setTimeout(() => el.parentNode.removeChild(el))
// if(el.parentNode!=null){
// setTimeout(() => console.log(el.parentNode))
// el.parentNode.removeChild(el);
// }
}
}
});
//权限检查方法
Vue.prototype.$_has = function (value) {
debugger
let isExist = false;
let buttonpermsStr = ['admin', 'inpurt'];
if (buttonpermsStr == undefined || buttonpermsStr == null) {
return false;
}
for (let i = 0; i < buttonpermsStr.length; i++) {
if (value == buttonpermsStr[i]) {
isExist = true;
break;
}
}
return isExist;
};
这里的数据,我是用来测试的,项目的数据不便贴出。刚开始el.parentNode获取不到,总是为null,是因为获取时DOM还没有加载,所以就放在了setTimeout里。
将自定义代码单独放在js文件里,然后在main.js中引用即可
import has from './assets/btnPermission.js'
然后直接在按钮上使用;
<template>
<div>
<button class="btns" v-has="'admin1'">新增</button>
</div>
</template>
续:上述问题更好的解决方案:
不使用bind钩子,使用inserted,inserted的作用是,被绑定元素插入父节点时调用,父节点存在即可调用。