vue3中自定义指令踩坑

需求背景

将vue2升级成vue3，本来vue2中是使用的自定义指令，结果在vue3中指令失效，并且控制台报警

Runtime directive used on component with non-element root node. The directives will not function as intended

查了一下意思

然后去搜了一下原因，简单来说就是

当在组件上使用自定义指令时，它会始终应用于组件的根节点

当应用到一个多根组件时，指令将会被忽略且抛出一个警告

解决办法

写了一个工具函数，用于判断是否有按钮级别权限， 然后使用 provide/inject 提供和注入公共方法， 最后在页面中按钮权限全部使用v-if来控制

代码实现

/* util.js*/
// 是否有按钮级别的权限
const  hasAuth=(value)=>{
  if (!value) {
    throw new Error(`权限不能为空! 例如 v-if="hasAuth('sys:config:save')",v-if="hasAuth(['sys:config:save','sys:config:update'])"`)
  }
  if (typeof value === 'string' && value !== '') {
    value = [value]
  }
  if (!(value instanceof Array && value.length > 0)) {
    throw new Error(`权限不能为空! 例如 v-if="hasAuth('sys:config:save')",v-if="hasAuth(['sys:config:save','sys:config:update'])"`)
  }
  const permissions = value
  const allPermissions = store.getters && store.getters.permissions
  const hasPermission = permissions.some(permission => {
    if (!permission.indexOf(',')) {
      return allPermissions.includes(permission)
    } else {
      const permissionSubAnds = permission.split(',')
      const hasPermissionSubAnd = permissionSubAnds.every(permissionSubAdd => {
        return allPermissions.includes(permissionSubAdd)
      })
      return hasPermissionSubAnd
    }
  })
  return hasPermission
}

/* main.js */

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from './permission';
import store from "@/store/index";
import ElementPlus from 'element-plus'
import zhCn from "element-plus/es/locale/lang/zh-cn";
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { hasAuth } from './utils/util';

const app=createApp(App)
app.provide('hasAuth',hasAuth)
app.use(router).use(store).use(ElementPlus, {locale: zhCn}).mount('#app')
Object.keys(ElementPlusIconsVue).forEach(key => {
    app.component(key, ElementPlusIconsVue[key])
})

<template>
  <el-button v-if="hasAuth('ops:project:save')" class="filter-item" type="primary"             @click="btnCreate" style="margin: 0 5px;">
            <el-icon style="margin-right: 5px;"><Plus /> </el-icon>新增</el-button>
</template>

<script>
export default {
  inject:['hasAuth'],
}
</script>