Vue3中element-plus使用图标动态显示

最新推荐文章于 2025-03-17 14:37:32 发布
最新推荐文章于 2025-03-17 14:37:32 发布
阅读量885 收藏
点赞数 1
文章标签： vue.js javascript 前端
原文链接：https://blog.youkuaiyun.com/yuliwen0418/article/details/121493937
版权
在Vue.js中，为了在渲染菜单时动态展示icon图标，可以利用<component>元素的is属性，配合<el-icon>组件，将菜单项的icon属性作为组件的名称，实现图标渲染的动态化。这样可以提高代码的灵活性和可维护性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

省略v-for代码。。。。

如果想在渲染菜单时动态使用icon图标，需要在标签内加入<component />

<el-icon>
      <component :is="item.icon" />
</el-icon>

就中间的内容比较重要，详细的看原文

萝卜头888
关注
Vue3【常见UI组件库、Vue3加载Element-plus 、Vue3加载Element-plus的字体图标 】(十六)-全面详解（学习总结---从入门到深化）
04-12 884
Vue3【常见UI组件库、Vue3加载Element-plus 、Vue3加载Element-plus的字体图标 】(十六)-全面详解（学习总结---从入门到深化）
个人技术总结——Vue3与Element-plus的使用
singular_ity的博客
06-01 1135
使用 Vue 3 进行前端开发，结合 Element Plus 组件库，快速构建高质量的网页界面。使用Vue 3结合Element Plus进行开发，极大地简化了界面构建过程。Element Plus提供的现成组件库，减少了手动编写CSS和JavaScript的工作量，加快了开发速度，并且有助于保持界面的一致性和美观性。但是，这些组件有时可能与特定项目的定制化需求不完全匹配，导致需要对组件进行深入的调整和定制，这样的修改可能会相当复杂。
Vue3实现动态菜单展示，实现动态图标展示，实现跳转到一个新页面
weixin_44728473的博客
06-27 3054
Vue3实现动态菜单展示，实现动态图标展示，实现跳转到一个新页面
vue3 使用element-plus动态渲染Icon图标
存放一些自己学习的知识点，可能有错误
04-09 747
今天使用vue3+vite重构项目的时候，构建测i边栏的时候需要动态渲染图标。但是动态渲染就不行了，找了半天，终于看到可以使用内置的component组件。但是在vue3中不能这样使用。官方给出的实例是这样的。
Vue3后台管理项目封装一个功能完善的图标icon选择器Vue组件动态加载icon文件下的svg图标文件
最新发布
前端开发工程师
03-17 835
在最近开发中，使用到了`vue3`开发`QMS`后台管理系统，遇到了菜单管理功能，菜单的新增，删除，修改都用到了icon图标选择器，`icon`图标选择器能够高效的选择和使用`icon`图标,索性将其封装成一个`icon`图标选择器组件。一个完善的图标选择器不仅要支持图标的展示和选择，还需要提供搜索、多种视图切换、图标复制等功能。本文将详细介绍如何封装一个功能丰富、用户体验良好的图标选择器组件。
vue3 element-plus动态菜单及动态图标
·
03-01 4426
引入element-plus。
vue3 动态加载el-icon图标
热门推荐
周家大小姐
05-28 1万+
安装插件 cnpm install @element-plus/icons main.js引入 import { createApp } from 'vue' import App from './App.vue' import router from './router/index' import { store, key } from './store/index' import ElementPlus from 'element-plus' import 'element-plus/dis
Vue3动态引入Element-plus icon图标
a1071626267的博客
12-14 2867
Vue3动态引入Element-plus icon图标
Vue3中element-plus全局使用Icon图标
m0_67393342的博客
03-09 2843
Vue项目中使用Element-plus的Icon图标，包括按钮和动态菜单 1、安装图标库 npm install @element-plus/icons 2、注册 main.ts文件中引入并注册 import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import * as ElIcons from '@element-plus/icons' const app
Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，
每天都要努力学习哦~~
01-25 351
官方提供了组件导入的方式使用图标。而我的图标是全局导入的，默认使用官方的命名。在菜单栏使用图标，并且是动态渲染的，刚好用到图标组件名称是Menu时，点击带有这个图标名称的菜单，就出问题了，导致其他菜单不显示。最后使用排出法才确定是个图标组件的名称导致的bug，后面就换了一个图标组件。目前在升级前端框架，UI组件element-plus升级到了目前最新的1.3.0beta8版本，图标也换成了官方提供的Svg。最后，我只直接换了一个其他icon组件，然后我提交了issues，建议他们重新改下命名方式。
vue组件库element-plus快速了解
Ataoker的博客
01-11 1198
闲来无事，体验element-plus 组件库
Element-Plus 实现动态渲染图标教程
interest_ing_的博客
03-27 3432
Element-Plus 是 Element UI 的 Vue 3 版本，它提供了一套完整的组件库，用于快速构建企业级的后台产品。在 Element-Plus 中，我们可以使用 `` 标签来动态渲染组件，这使得在菜单中根据条件动态显示不同的图标成为可能。本文将介绍如何使用 Element-Plus 和 Vue.js 来实现动态渲染图标的功能。
vue3+elementPlus如何动态渲染icon
m0_61854711的博客
06-27 2018
vue3+elementPlus全局引入icon，动态渲染icon
Element-Plus-动态渲染 ICON
Sunny_boy
05-17 1355
【代码】Element-Plus-动态渲染 ICON。
Vue3 element-plus动态Icon图标解决方法
su6666v的博客
04-06 2406
然后在main.js或者mian.ts中导入并设置全局变量。至于图标名称，则是官网上列举的这些。
vue3如何动态渲染Element-plus图标
cjp1223的博客
03-17 1174
所以在vue2中使用Element UI动态变换图标时就可以通过：class的方式渲染图标。但是Element Plus就不行了，我们知道引用的图标是。1.首先我在data中定义好需要展示的图标。2.然后再setup中进行一个定义。1.首先将需要展示的组件进行导入。3.然后进行动态渲染。
vue3 动态加载组件
u012285295的博客
07-31 729
【代码】vue3 动态加载组件。
Vue3+ElementPlus：icon图标不显示（给表格字段里添加图标）
无面人的博客
12-08 3725
在Vue3中，想在表格的字段中引入图标；因为给字段做了触发提示，因此想加个图标提示一下用户；但是开发过程中出现图标不显示等问题，因此记录一下解决方案
Element Plus 动态使用icon图标
素味平生的博客
07-14 1337
Element Plus 动态使用图标
vue3使用element-plus图标 动态生成图标
01-19
### 动态生成Element Plus图标的方法 在Vue3项目中实现动态生成Element Plus图标的用法涉及几个关键步骤。为了确保图标能够被正确加载并显示，需遵循特定的方式引入和注册这些组件。 #### 安装依赖库 首先确认已经安装了`element-plus`以及其图标包： ```bash npm install element-plus @element-plus/icons-vue ``` #### 导入所需图标 对于按需导入单个图标的情况，在脚本部分通过ES6语法单独引入所需的图标组件[^2]： ```javascript import { Star as IconStar, Search as IconSearch } from &#39;@element-plus/icons-vue&#39;; ``` 接着可以在模板里像常规组件一样使用它们： ```html <template> <div> <!-- 使用星形图标 --> <icon-star /> <!-- 或者绑定到变量来决定哪个图标应该渲染 --> <component :is="currentIcon"></component> </div> </template> <script setup> // 假设 currentIcon 是响应式的 prop 或 data 属性 const props = defineProps({ currentIcon: String, }); </script> ``` #### 动态切换图标 如果希望基于某些条件或状态变化而改变所使用的图标，则可以利用`:is`特性配合计算属性或者方法返回不同的图标名称字符串[^4]： ```html <template> <button @click="toggleIcon"> Toggle Icon <component :is="dynamicIconComponent"/> </button> </template> <script setup> import { ref, computed } from &#39;vue&#39; import { Star as IconStar, Location as IconLocation } from &#39;@element-plus/icons-vue&#39; let isStarActive = ref(true) function toggleIcon() { isStarActive.value = !isStarActive.value; } const dynamicIconComponent = computed(() => isStarActive.value ? IconStar : IconLocation ); </script> ``` 上述代码展示了如何创建一个按钮点击事件处理器 `toggleIcon()` 来切换两个不同类型的图标之间的显示；同时定义了一个计算属性 `dynamicIconComponent` ，它根据布尔值的状态返回对应的图标组件对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值