权限数组

创建权限文件 src/common/array.js
VUE_vue自定义指令，权限管理-小白菜博客
array.js

export function checkArray(key){
    //权限数组
    let arr = ['1','3','5'];
    let index = arr.indexOf(key)
    if(index >-1){
        return true;
    }else{
        return false;
    }
}

自定义指令

  • el: 指令所绑定的元素，可以用来直接操作 DOM，就是放置指令的那个元素。
  • binding: 一个对象，里面包含了几个属性，这里不多展开说明，官方文档上都有很详细的描述。
  • vnode：Vue 编译生成的虚拟节点。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

main.js

import  {checkArray} from './common/array'

//自定义指令
// 注册一个全局自定义指令 v-display-key
Vue.directive('display-key',{
  // 当绑定元素插入到 DOM 中
  inserted(el,binding){
    let displayKey = binding.value;
    if(displayKey){
      let hasPermission = checkArray(displayKey);
      if(!hasPermission){
      	//查找el的父节点并删除父节点中匹配成功的el
        el.parentNode && el.parentNode.removeChild(el);
      }
    }else{
      throw new Error(`need key! Like v-display-key = "''displayKey"`)
    }
  }
})

使用

只会显示权限数组存在的

<button v-display-key="'1'">按钮一</button>
<button v-display-key="'2'">按钮二</button>
<button v-display-key="'3'">按钮三</button>

VUE_vue自定义指令，权限管理-小白菜博客