vue 自定义指令实现模块权限、指标权限 （按钮级权限）

理解什么是自定义指令：

指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。

特性以及使用：
自定义指令有五个生命周期（也叫钩子函数），分别是

bind、inserted、update、componentUpdated、unbind

1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
3. update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4. componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
5. unbind：只调用一次，指令与元素解绑时调用。

---

实例： 自定义指令 v-PDT=“权限码”

// 宽度100%的无访问权限
Vue.directive('PDT', {
  bind (el, binding, vnode) {
    if(typeof binding.value == 'string'){   //  使用时绑定了权限码
      if(!Vue.prototype.$permissions(binding.value)){  // 该权限码无权限时
        commomPDT(el);
      }
    }else{ 
      let value = binding.value;
      let code = value.some(val => Vue.prototype.$permissions(val));
      if (code == false) {
        commomPDT(el);
      }
    }
  }
})

---

// 权限检查方法

// $permissions 判断模块指标是否有权限
Vue.prototype.$permissions = function(code){
  const RIGHTLIST = window.localStorage.getItem('RIGHTLIST');
  if(RIGHTLIST != 'undefined' && RIGHTLIST && RIGHTLIST != 'null'){
      let permissionsNew = JSON.parse(RIGHTLIST);
      let permissions = permissionsNew.map((item,index) =>{
          return item.fieldId;
      });
      return permissions.includes(code)   // 用户所有的权限中 是否有该模块的权限码
  }else{
      return true;
  }
};

permissions方法判断是否有权限再调用接口，或者直接由后端来干这个事情。

无权限添加展示方法

// 给el 该dom加遮罩无权限图层
let commomPDT = function(el){
  el.innerHTML = '暂无权限，如申请权限，请提交IT服务热线申请（拨打电话xxxxxxxxxx）';
  el.style.color = '#cccccc';
  el.style.fontSize = '20px';
  el.style.display = 'flex';
  el.style.justifyContent = 'center';
  el.style.alignItems = 'center';
  el.className +=  ' no-permissions';
  el.style.backgroundColor = getCookie("themeStyle") &&　getCookie("themeStyle")　===　'dark' ? 'rgb(5,14,60)': '#fff';
  el.style.zIndex = '10000';
  el.style.opacity = '1.0';
}