- 使用 Vue.directive(id, [definition]) 定义全局的指令来进行自定义指令
- 思路:在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的storage进行存储,之后,定义指令,如果用户含有此按钮权限,则在页面显示出来
- 参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v-前缀,但是: 在调用的时候,必须在置顶的名称前加上 v-前缀来进行调用
- 参数2: 是一个对象, 这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
Vue.directive("has", {
bind: function(el,binding,vnode){
console.log(el,binding,vnode)
if (!Vue.prototype.$_has(binding.value)) {
el.parentNode.removeChild(el);
}
},
inserted: function(el){
console.log(el)
},
updated: function(el) {
console.log(el)
},
})
Vue.prototype.$_has = function(value) {
debugger
let isExist=false;
let buttonpermsStr=sessionStorage.getItem("buttenpremissions");
if(buttonpermsStr === undefined || buttonpermsStr == null || buttonpermsStr === ""){
return false;
}
let buttonperms=JSON.parse(buttonpermsStr);
for(let i=0;i<buttonperms.length;i++){
if(buttonperms[i].perms.indexOf(value)>-1){
isExist=true;
return;
}
}
return isExist;
};
<input type="text" class="form-control" v-model="keywords" v-has>