vue3自定义指令实现按钮权限

1.注册指令permission

main.js

const app = createApp(App)
import { client } from './utils/common.js' // 公共方法

// 自定义按钮权限指令
app.directive('permission', {
  mounted(el, binding, vnode) {
    client.setPermissions(el, binding, vnode)
  },
})

2.封装指令方法

common.js

setPermissions(el, binding, vnode) {
    // 与后端返回的数组进行比对，如果后端返回的数组中的值包含binding.value
    // 则有权限，该按钮展示，否则隐藏
    const permissions = sessionStorage.getItem('Permissions')
    const bindVal = JSON.parse(sessionStorage.getItem('MenuItem')).Name+':'+binding.value
    if (permissions&&permissions.indexOf(bindVal) > -1) {
      // console.log('有权限');
    } else {
      el.parentNode && el.parentNode.removeChild(el)
      // console.log('无权限，删除改节点',el);
    }
  }

后端返回的指令集合数据

"Permissions": [
      "sysPort:page",
      "sysPort:edit",
      "sysPort:delete",
      "sysPort:par",
      "sysPort:addDetail",
      "sysPort:editDetail",
      "sysPort:deleteDetail",
      "sysWorker:page",
      "sysWorker:start",
      "sysWorker:init",
      "sysWorker:edit",
      ...
 ]

3.使用指令

vue

 <el-icon
      class="operate_icon_item delete deletedeletedelete"
      size="16px"
      @click="handleDelete(scope.row)"
      :title="$t(`table.delete`)"
      v-permission="['delete']"
      ><Delete
    /></el-icon>