vue封装自定义指令，通过权限判断元素显示隐藏

官方文档

vue2官方文档：https://v2.cn.vuejs.org/v2/guide/custom-directive.html
vue3官方文档：https://cn.vuejs.org/guide/reusability/custom-directives.html

（以下示例是个人项目中的使用，具体怎么使用看情况修改）

vue2封装指令及注册

1.封装

import store from '@/store'
export default {
  inserted: (el, binding) => {
    let { value } = binding
    const usrInfo = store.state?.userDetailInfo // 取存起来的用户信息
    if (value?.length > 6) value = value.substring(0, 6)
    const permissions = usrInfo && usrInfo.authorityCode
    if (!value) {
      el.parentNode && el.parentNode.removeChild(el)
      return
    }
    const permissionFlag = value
     //判断是否有权限
    const hasPermissions = permissions.split(',').indexOf(permissionFlag)
    if (hasPermissions === -1) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
}

2.注册

在main.js中注册：

import hasOperatePermi from '@/directive/hasOperatePermi'
Vue.directive('hasOperatePermi', hasOperatePermi)

vue3指令封装及注册

1.封装

import store from '@/store'
export default {
  mounted(el, binding, vnode) {
    let { value } = binding
    if (value?.length > 6) value = value.substring(0, 6)
     // 取存起来的用户信息
    const permissions = store.getters && store.getters.authorityCode
      if (!value) {
        el.parentNode && el.parentNode.removeChild(el)
        return
      }
      const permissionFlag = value
      //判断是否有权限
      const hasPermissions = permissions.split(',').indexOf(permissionFlag)
      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
  }
}

2.注册

在main.js中注册：

import hasOperatePermi from '@/directive/hasOperatePermi'
app.directive('hasOperatePermi', hasOperatePermi)

使用

<button  v-hasOperatePermi="row.authorityCode" />