VUE_vue自定义指令，权限管理

梦里梦外; 2022-11-04 05:22 128阅读 0赞

# 权限数组 #

创建权限文件 src/common/array.js  
![在这里插入图片描述][2021030116084846.png]  
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"`)
        }
      }
    })

# 使用 #

只会显示权限数组存在的

![在这里插入图片描述][20210301161838693.png]  
[自定义指令 vue官方文档][vue]

[2021030116084846.png]: /images/20221023/97097342f719418fac353dbeba6b672d.png
[20210301161838693.png]: /images/20221023/6590ab9b38844bcdad9f9606c54e4e08.png
[vue]: https://cn.vuejs.org/v2/guide/custom-directive.html