vue3 动态加载el-icon图标
https://element-plus.org/zh-CN/component/icon.html
静态示例
<el-icon>
<Menu/>
</el-icon>
动态示例
Menu为图标名称,可替换,注意是字符串
<el-icon>
<component :is="Menu" />
</el-icon>
在菜单列表中使用,渲染出每个菜单不同的图标
<el-menu :default-active="activeMenu" class="sidebar">
<el-sub-menu v-for="(item, index) in menus" :index="item.name" :key="index">
<template #title>
<el-icon>
<component :is="item.icon" />
</el-icon>
<span>{{ item.name }}</span>
</template>
<template v-for="subItem in item.children">
<el-menu-item :index="subItem.path" :key="index" @click="menuSelect">{{
subItem.meta.title
}}</el-menu-item>
</template>
</el-sub-menu>
</el-menu>
分类:
前端 / Vue学习
, 前端
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!