理解什么是自定义指令：
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。
特性以及使用：
自定义指令有五个生命周期（也叫钩子函数），分别是
bind、inserted、update、componentUpdated、unbind
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
- componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
- 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';
}
