Vue 封装Element-Plus的Icon图标

可能还是因为我自己是个业余前端，对于vue的理解还没那么深，在用ElementPlus的时候发现el-icon这个功能是真的难用。

先说一下我的使用场景，对用户登陆后，通过后端把用户的菜单传到前端，前端根据用户的菜单来进行渲染，但问题就出在这个标签上。 官方提供的样式：

<el-icon>
    <Edit />
</el-icon>

乍一看上面这个没啥问题，但是在渲染的时候，我后端返回给前端的是一个字符串的Edit呀，那如何让这个字符串能变成一个图标的标签名呢，在差阅资料后，发现还是封装el-icon这个方式比较简单也好实现。

现在假设后端返回给我们如下的json格式权限菜单,我存储在一个叫做myMenuData的数组中。

<template>
    ...
    <el-container>
        <el-aside width="200px">
            <el-menu
                v-for="menu in myMenuData"
                :key="menu.id"
                router
                class="el-menu-vertical-demo"
            >
                <el-sub-menu :index="menu.id">
                    <template #title>
                        <el-icons :name="menu.icon" ></el-icons>

                        <span>{{ menu.name }}</span>
                    </template>
                    <el-menu-item
                        v-for="subMenu in menu.chile_list"
                        :index="subMenu.path"
                        @click="goToRoute"
                        :key="subMenu.id"
                        >{{ subMenu.name }}</el-menu-item
                    >
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-main>
            <el-card>
                <router-view />
            </el-card>
        </el-main>
    </el-container>
    ...
</template>


<script>
import ElIcons from '@/components/icon.vue'
...

const myMenuData = reactive([
    {
        id: 1,
        name: "文章管理",
        icon: "Edit",
        chile_list: {
            1: {
                id: 101,
                name: "文章列表",
                path: "ArticleList",
            },
            2: {
                id: 102,
                name: "标签管理",
                path: "ArticleTagsManage",
            },
            3: {
                id: 103,
                name: "文章类型管理",
                path: "ArticleIficationManage",
            },
        },
    },
    {
        id: 2,
        name: "后台设置",
        icon: "Setting",
        chile_list: {
            1: {
                id: 201,
                name: "用户列表",
                path: "SystenManageUserList",
            },
            2: {
                id: 202,
                name: "权限列表",
                path: "SystenManageAccessList",
            },
            3: {
                id: 203,
                name: "角色列表",
                path: "SystenManageRoleList",
            },
        },
    },
]);

// 点击页面标签跳转处理不同的路由
const goToRoute = async (ele) => {
    const routeName = ele.index;
    router.push({
        name: routeName.toString(),
    });
};

</script>

而icon.vue则进行对el-icon的封装即可解决。

<template>
    <el-icon :size="size" :color="color">
        <component :is="props.name"></component>
    </el-icon>
</template>

<script setup>

const props = defineProps({
    name: "ElIcons",
    props: {
        name: {
            type: String,
            required: true,
        },
        size: {
            type: String,
            default: "",
        },
        color: {
            type: String,
            default: "",
        },
    },
});
</script>