最近做项目，客户要求做用户-角色-按钮权限，我是用自定义指令来实现的，代码如下：
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 =https://www.it610.com/article/= buttonpermsStr[i]) {
isExist = true;
break;
}
}
return isExist;
};
这里的数据，我是用来测试的，项目的数据不便贴出。刚开始el.parentNode获取不到，总是为null，是因为获取时DOM还没有加载，所以就放在了setTimeout里。
将自定义代码单独放在js文件里，然后在main.js中引用即可
import has from './assets/btnPermission.js'然后直接在按钮上使用;
续：上述问题更好的解决方案：
【Vue按钮权限】不使用bind钩子，使用inserted，inserted的作用是，被绑定元素插入父节点时调用，父节点存在即可调用。
