当前位置： 首页 > news >正文

Elementui-Plus动态渲染图标icon

news 来源：原创 2024/9/18 8:40:06

一、在main.ts引入相关依赖：

import * as ElementPlusIconsVue from '@element-plus/icons-vue'for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}

二、使用 component 组件进行动态加载

<component class="icons" :is="icon"></component>

其中 icon变量的的值可以是 DataAnalysis、User等，可在页面进行复制：图标地址

三、  修改样式

在vue页面增加样式：

svg {width: 14px;height: 14px;margin-right: 5px;padding-top: -1px;
}

处理后，即可通过icon值进行动态渲染图标，图标大小可以通过svg样式进行控制！

相关文章：

  • C# LinkedList
  • 全光谱日光模拟HUD阳光倒灌实验温升测试
  • vue 组件通信的解决方案
  • react面试题四
  • 【Java】了解线程 Thread 类的使用，如何创建、终止、等待一个线程以及获取线程的状态
  • 【Qt】常见控件 —— QWidget(上)
  • 甲醛最怕三个克星 新家去除甲醛最快最有效的方法
  • Redis内存淘汰
  • Android 息屏录音
  • yolact导出onnx
  • 如何通过数据管理优化储能系统的运行效率？
  • Android Studio SQLite Manage
  • Java集合框架--LIST，ArrayList，LinkedList
  • 笔记-系统规划与管理师-案例题-2022年-IT服务部署实施
  • 第三十一章：docker如何部署Nexus
  • php的引用
  • JavaScript 如何正确处理 Unicode 编码问题！
  • 【技术性】Search知识
  • CentOS学习笔记 - 12. Nginx搭建Centos7.5远程repo
  • css的样式优先级
  • django开发-定时任务的使用
  • Docker 1.12实践：Docker Service、Stack与分布式应用捆绑包
  • Effective Java 笔记（一）
  • flask接收请求并推入栈
  • HashMap ConcurrentHashMap
  • Java 网络编程（2）：UDP 的使用
  • Less 日常用法
  • tab.js分享及浏览器兼容性问题汇总
  • yii2中session跨域名的问题
  • 翻译：Hystrix - How To Use
  • 快速体验 Sentinel 集群限流功能，只需简单几步
  • 深入浏览器事件循环的本质
  • 温故知新之javascript面向对象
  • 原生 js 实现移动端 Touch 滑动反弹
  • 《TCP IP 详解卷1：协议》阅读笔记 - 第六章
  • 【运维趟坑回忆录 开篇】初入初创, 一脸懵
  • 第二十章：异步和文件I/O.（二十三）
  • ​中南建设2022年半年报“韧”字当头，经营性现金流持续为正​
  • !$boo在php中什么意思,php前戏
  • # 服务治理中间件详解：Spring Cloud与Dubbo
  • $.ajax()方法详解
  • （DenseNet）Densely Connected Convolutional Networks--Gao Huang
  • （附源码）springboot“微印象”在线打印预约系统 毕业设计 061642
  • （附源码）ssm捐赠救助系统 毕业设计 060945
  • (原創) 未来三学期想要修的课 (日記)
  • .NET DevOps 接入指南 | 1. GitLab 安装
  • .NET/C# 异常处理：写一个空的 try 块代码，而把重要代码写到 finally 中（Constrained Execution Regions）
  • .NET学习教程二——.net基础定义+VS常用设置
  • .net中应用SQL缓存（实例使用）
  • @FeignClient 调用另一个服务的test环境，实际上却调用了另一个环境testone的接口，这其中牵扯到k8s容器外容器内的问题，注册到eureka上的是容器外的旧版本...
  • [ CTF ]【天格】战队WriteUp- 2022年第三届“网鼎杯”网络安全大赛（青龙组）
  • [14]内置对象
  • [2016.7 Day.4] T1 游戏 [正解:二分图 偏解：奇葩贪心+模拟？（不知如何称呼不过居然比std还快）]
  • [383] 赎金信 js
  • [C++] new和delete