全局自定义指令

main.js 里面注入

import '@/directive'

directive.js

import Vue from 'vue'
import store from './store'

let btnList = []
// const btnList = ['MerchantList_showAdd','ProfessionalOldList_sign', 2,3,4,8,5,9,0,3,4,5,24,25,34,5,635,54,2,25,24,54,52,5,2,5,245,24,5,534,5,'lcj',34,64,675,75,774868,67,8,67865,86,86,58,56,8,657,86,78,67,78675,876,856,856] // 指令列表

Vue.directive('has', {
  inserted: async (el, binding) => {
    if (!has(binding.value)) {
      el.parentNode.removeChild(el) // 调用元素父级删除，有时候父元素未渲染出来可以把bind换成inserted
    }
  }
})

function has(value) {
  btnList = store.state.user.permissionsBtnList
  let isExist = false;
  if (btnList === undefined || btnList === null || btnList.length === 0) {
    return false;
  }
  if (btnList.includes(value)) {
    isExist = true;
  } else {
    isExist = false;
  }
  return isExist;
}

window.onload = async function() {
  await store.dispatch('user/getUserPermission')
}

// 全局判断方法
Vue.prototype.$_has = has

export default has