vue2中使用自定义指令全局控制隐藏显示元素

1.在根目录下创建文件夹 directive，创建文件 permission.js

import store from '@/store'
import Vue from 'vue'

// 自定义指令方法
Vue.directive('permission', {
  inserted: function(el, { value, modifiers }) {
    let isHide = false
    if (Array.isArray(value)) {
      if (modifiers.and) {
        if (value.every((item) => store.hideBtnList.includes(item))) {
          isHide = true
        }
      } else {
        if (store.hideBtnList.some((item) => value.includes(item))) {
          isHide = true
        }
      }
    } else if (store.hideBtnList.includes(value)) {
      isHide = true
    }
    if (isHide) {
      el.style.display = 'none'
    }
  },
})

2.在 main.js 引入该文件

import '@/directive/permission'

3.在组件中的元素上使用

 显示所有