Vue-自定义指令实现权限校验利用自定义指令实现权限校验

利用自定义指令实现权限校验

// directive.js
// 控制元素显示不显示
Vue.directive('premission1', function(el, obj){
  // 控制 display的值即可
  el.style.display = obj.value > 3? 'none': 'block'; 
});

// 控制元素加载不加载，需要用到钩子函数 instered
Vue.directive('premission2',{
  inserted(el, obj) {
    // 当被绑定的元素经过vue编译之后插入到 DOM 中时触发
    obj.value > 3? el.parentNode.removeChild(el): null; 
  }
});

 <!-- html页面部分代码 -->
 <h1 v-premission1='3'>我显示</h1>
 <h1 v-premission1='5'>我不显示</h1>

 <h1 v-premission2='2'>我加载</h1>
 <h1 v-premission2='4'>我不加载</h1>

在这里插入图片描述

！注意：不论是全局自定义指令，还是局部自定义指令，指令对应的函数中的this都是window，而不是当前实例