极限踩坑之Element-plus自动导入动态icon并通过后端icon的name显示

极限踩坑之Element-plus自动导入动态icon并通过后端icon的name显示

这块重点不说如何自动导入了，请去看官网自动导入

使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。

自动导入图标
比如我后端数据通过封装后动态路由如下

{
    "id": 1,
    "path": "/system",
    "redirect": "/system/user",
    "name": "/system",
    "meta": {
        "title": "系统管理",
        "icon": "setting",
        "hidden": false,
        "roles": [
            "ADMIN"
        ],
        "keepAlive": true
    },
    "children": [...]
}

我想将icon渲染到vue页面

<el-menu-item
    v-if="data.children == null || data.children.length == 0"
    :key="data.path"
    :index="data.path"
>
    <el-icon>
        <component :is="getString(data.meta.icon)"></component>
    </el-icon>

    <!-- 文字过长，显示省略号，鼠标悬停显示全文 -->
    <span
        style="
            display: block;
            width: 90%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        "
        :title="data.meta.title"
        >{{ data.meta.title }}</span
    >
</el-menu-item>

在 Vue3 中，component 动态组件的 is 属性必须绑定的是组件实例，而不是组件名字，所以需要去掉双引号，我找了gpt转换，但没有合适的办法，后来采用了枚举

// 使用动态导入生成组件
// 定义一个枚举
enum MenuIcon {
    setting = IconEpSetting,
    menu = IconEpMenu,
    user = IconEpUser,
}
function getString(icon: string): MenuIcon {
    console.log("icon是:", icon);
    return MenuIcon[icon];
}

这样，枚举=后面的就是可以被vue识别了，识别逻辑是，我后端返回的icon是一个字符串，我就拿着字符串去枚举MenuIcon 里面比对找出对应的值，然后封装返回到页面进行渲染即可