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>
posted @   槑孒  阅读(1163)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
点击右上角即可分享
微信分享提示