vue自定义指令实现按钮权限控制

• 使用 Vue.directive(id, [definition]) 定义全局的指令来进行自定义指令
• 思路：在用户登陆后，根据用户id读取用户的所有权限数据，放入本地的storage进行存储，之后，定义指令，如果用户含有此按钮权限，则在页面显示出来
• 参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v-前缀，但是： 在调用的时候，必须在置顶的名称前加上 v-前缀来进行调用
• 参数2： 是一个对象， 这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

Vue.directive("has", {
	// 注意： 在每个函数中， 第一个参数永远是el， 表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象
	bind: function(el,binding,vnode){
		// 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
		console.log(el,binding,vnode)
		if (!Vue.prototype.$_has(binding.value)) {
          el.parentNode.removeChild(el);
        }
	},
	inserted: function(el){
	// inserted 表示元素插入到DOM中的时候，会执行inserted函数【触发一次】
    	console.log(el)
	},
	updated: function(el) { // 当VNode更新的时候，会执行updated，可能会触发多次
		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>