首页 > 其他分享 >vue3 动态加载el-icon图标

vue3 动态加载el-icon图标

时间:2024-02-06 14:00:30浏览次数:35  
标签:el 菜单 示例 vue3 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>

标签:el,菜单,示例,vue3,icon,图标
From: https://www.cnblogs.com/echohye/p/18009603

相关文章

  • hello-world
    title:HelloWorldQuickStartCreateanewpost$hexonew"MyNewPost"Moreinfo:WritingRunserver$hexoserverMoreinfo:ServerGeneratestaticfiles$hexogenerateMoreinfo:GeneratingDeploytoremotesites$hexodeployMorein......
  • 软件icon制作流程,就一张256-256的图即可,一键生成windows所有格式
    软件icon制作流程,就一张256-256的图即可,一键生成windows所有格式好久不用这个都有些生疏了,还特意做了好几个尺寸的图,结果白弄了,软件会自动生成。1.准备256-256px的图2.打开GreenfishIconEditorPro下载地址:GreenfishIconEditorPro(图片转图标工具)V3.5多语版https:/......
  • vue2中el-tree组件实现双击树的节点来修改节点名称
    目标在没双击之前,树的节点是文本样式。在双击之后,节点位置变成输入框形式,原节点的名称显示在输入框中,可以进行修改。修改完毕之后,当输入框失去焦点的时候,输入框消失,又变成原本的文本样式,并且显示的是修改后的节点名称。添加一个树<template><div><el-tree......
  • yield from 关键字的 return 语句
    我经常需要写一些比较复杂的代码,常常会遇到各种各样的问题。比如我在使用yieldfrom表达式时,return语句的问题。我们知道,在使用yieldfrom表达式时,return语句的作用是在子生成器(被调用的生成器)执行完毕后,返回最终的结果到调用者。这可以让生成器在嵌套结构中更清晰地传递值。......
  • python爬虫爬取豆瓣电影top250并写入Excel中
    importrequestsimportreimportopenpyxl#创建工作表wb=openpyxl.Workbook()ws=wb.active#调整列距forletterin['B','C']:ws.column_dimensions[letter].width=66#发送网络请求headers={"User-Agent":'Mozilla/5.0(WindowsNT10.0;Win64;x64)......
  • 使用ocelot 配置网关
    3.1场景描述建3个站点,2个微服务站点,1个网关微服务1:https://localhost:7227/微服务2:https://localhost:7019/网关:https://localhost:7055/在浏览器里访问 https://localhost:7227/api/Product/test1会输出test1在浏览器里访问https://localhost:7019/api/order/test2会输......
  • element使用
    一、el-table指定汇总列<el-table:row-key="(row)=>row.Id":data="listData"bordershow-summary:summary-method="summaryColumn"style="widt......
  • 什么是 Ocelot?
    Ocelot是一个用于构建微服务架构中API网关的开源框架,它充当了前端应用程序和后端微服务之间的入口点,处理请求路由、认证授权、流量管理、负载均衡、日志记录、安全性等任务。通过API网关,可以将多个微服务的API统一暴露给客户端,提供更简化和统一的接入方式。 Ocelot提供......
  • PowerShell中,可以使用特定的命令来执行关机、重启和休眠等操作
    PowerShell中,可以使用特定的命令来执行关机、重启和休眠等操作。以下是这些操作的常用命令及其简要说明:关机(Shutdown)Stop-Computer用于关闭本地或远程计算机。示例:Stop-Computer若要强制关闭(不等待应用程序响应),可以添加 -Force 参数:Stop-Computer-Force重启(Re......
  • [Go - slice] Remove Elements from a slice in Go
    Gohasaspecialindexingsyntaxthatformsthebasisofremovingoneormoreelementsfromaslice.Iwillteachyouthissyntaxandshowyouitsvariousforms.Baseduponthat,I'llshowyouhowtoremoveasingleelementfromaslice.However,you......