vue注册自定义指令，添加权限判断

在utils文件夹创建 directive.js文件

import Vue from 'vue';
import Store from '../store/index.js'

//v-has为编辑权限
Vue.directive("has", {
  inserted: function (el, code) {
    const str = code.value
    const menuName = Store.state.rolePermission
    let list = []
    menuName.forEach(val=>{
      if (val.permissionName == '编辑') {
        list.push(val.menuName)
          // if(val.menuName == str){
          //   el.parentNode.removeChild(el)
          // }
        }
      })
      if(!list.includes(str)){
        el.remove() 
      }
    }
})

//v-dle为删除权限
Vue.directive("dle", {
  inserted: function (el, code) {
    const str = code.value
    const menuName = Store.state.rolePermission
    let list = []
    menuName.forEach(val=>{
      if (val.permissionName == '删除') {
        list.push(val.menuName)
      }
    })
    
    if(!list.includes(str)){
      el.remove() 
    }


  }
})

Store.state.rolePermission的格式如下：

在页面中使用如下