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

最新推荐文章于 2024-03-27 02:11:58 发布
最新推荐文章于 2024-03-27 02:11:58 发布
阅读量725 收藏
点赞数 1
文章标签： vue.js javascript 前端
原文链接：https://blog.csdn.net/yuliwen0418/article/details/121493937
版权
在Vue.js中，为了在渲染菜单时动态展示icon图标，可以利用元素的is属性，配合组件，将菜单项的icon属性作为组件的名称，实现图标渲染的动态化。这样可以提高代码的灵活性和可维护性。
摘要由CSDN通过智能技术生成

省略v-for代码。。。。

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

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

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

萝卜头888
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 - Element Plus 动态渲染 ＜el-icon＞ 图标组件，根据三元表达式条件、v-if 指令动态判断图标并渲染图标组件， v-for 循环动态图标组件（提供详细示例代码教程）
王佳斌
09-08 5454
vue3 vite element plus UI组件库，el-icon图标组件，vue3 element plus 如何动态渲染图标icon组件，vue3之 element-plus的动态图标，Vue3+TS使用element-plus 动态Icon图标，vue3 element组件库动态加载el-icon图标，element plus 怎么v-for渲染图标，element plus 的图标组件怎么使用三元表达式判断，用v-if根据条件渲染el-icon图标组件，vue3动态渲染Element-plus
Vue3【常见UI组件库、Vue3加载Element-plus 、Vue3加载Element-plus的字体图标 】(十六)-全面详解（学习总结---从入门到深化）
04-12 599
Vue3【常见UI组件库、Vue3加载Element-plus 、Vue3加载Element-plus的字体图标 】(十六)-全面详解（学习总结---从入门到深化）
Vue3动态引入Element-plus icon图标
a1071626267的博客
12-14 2753
Vue3动态引入Element-plus icon图标
vue3+elementPlus如何动态渲染icon
m0_61854711的博客
06-27 1814
vue3+elementPlus全局引入icon，动态渲染icon
vue3如何动态渲染Element-plus图标
cjp1223的博客
03-17 1059
所以在vue2中使用Element UI动态变换图标时就可以通过：class的方式渲染图标。但是Element Plus就不行了，我们知道引用的图标是。1.首先我在data中定义好需要展示的图标。2.然后再setup中进行一个定义。1.首先将需要展示的组件进行导入。3.然后进行动态渲染。
Vue3+ElementPlus：icon图标不显示（给表格字段里添加图标）
无面人的博客
12-08 3333
在Vue3中，想在表格的字段中引入图标；因为给字段做了触发提示，因此想加个图标提示一下用户；但是开发过程中出现图标不显示等问题，因此记录一下解决方案
Vue3中element-plus全局使用Icon图标
m0_67393342的博客
03-09 2723
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-plus icon图标无法显示的问题(已解决)
m0_54849806的博客
03-09 807
项目场景： 在使用vue3+element-puls时,默认的icon图片无法显示的问题 问题描述： 在使用element-plus 1.2.0-beta.3版本时 引入侧栏组件时,导航左侧icon图标无法显示 效果图应该是 源码如下 <el-row class="tac"> <el-col :span="12"> <h5>Default colors</h5> <el-menu default-ac
Vue3 - Element Plus 全局自动引入图标组件教程，页面使用无需每次 import 即可直接使用 ＜el-icon＞ 组件图标（项目使用 Element Plus 内置图标不用再引入了）
王佳斌
09-08 6288
vue3 element plus 图标组件 el-icon，vue3 element plus组件库每次都需要import引入图标才能用吗，vue3 element plus图标组件如何不用引入就能使用，element plus el-icon如何不引入直接使用，Vue3 Element Plus如何像Element UI一样简单使用icon，Element Plus怎么使用el-icon，element plus图标使用详细教程，vue3全局注册element plus图标库教程，vue3引用eleme
Element Plus 动态使用icon图标
素味平生的博客
07-14 1221
Element Plus 动态使用图标
vue3需要动态引入icon图标解决方法
CHENC0518的博客
01-09 1643
vue3需要动态引入icon图标解决方法
Vue3+TS + element-plus 项目 动态生成Icon图标
weixin_55042716的博客
10-13 1064
文档原话：如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。在main.ts中先导入。
Element-Plus 实现动态渲染图标教程
最新发布
interest_ing_的博客
03-27 2230
Element-Plus 是 Element UI 的 Vue 3 版本，它提供了一套完整的组件库，用于快速构建企业级的后台产品。在 Element-Plus 中，我们可以使用 `` 标签来动态渲染组件，这使得在菜单中根据条件动态显示不同的图标成为可能。本文将介绍如何使用 Element-Plus 和 Vue.js 来实现动态渲染图标的功能。
Vue3实现动态菜单展示，实现动态图标展示，实现跳转到一个新页面
weixin_44728473的博客
06-27 2881
Vue3实现动态菜单展示，实现动态图标展示，实现跳转到一个新页面
动态使用 Element Plus 中 el-icon 组件的方法
Alan_Walker688的博客
02-24 723
动态使用 Element Plus 中 el-icon 组件的方法
Vue + Vite + Element Plus项目中配置自动引入el-icon后动态渲染图标的解决方法
Alan_Walker688的博客
07-05 2680
Vue3 + Vite + Element Plus 项目实现自动引入 el-icon 后动态渲染图标的方法
vue3+ts中使用自动导入图标插件后想动态渲染图标
balder_girl的博客
12-03 865
做侧边栏的折叠效果时候需要根据settingStore.collapsed的值动态渲染图标，想用的是element-plus中的这两个图标。如果想使用element-plus里面的图标，前缀要这样写（i+图标集名ep+elementplus中的图标名），然后ctrl+左键，就能进入components.d.ts这个存放组件的文件，这里就有路径，复制过来即可。在vue3+ts中，用了自动导入图标插件unplugin-icons后，想动态渲染图标。：根据路由的meta值，动态渲染icon图标，生成动态菜单。
在vue3中应用iconfont图标，使用iconfont出现方框怎么解决
ZYXKN的博客
02-17 1342
在实际的开发中，经常需要用到一些icon图标，一些ui框架有提供icon图标，但是数量总有穷尽的时候，而且有些图标并不能满足你的要求，此时就需要用到iconfont这个网站了，里面提供了很大icon图标还有很多使用方式 图片、svg、Font class、Unicode、Symbol。
vue3.0+新版elementPlus中如何动态插入icon图标的问题
weixin_44079946的博客
02-05 5225
vue3.0+新版elementPlus中如何动态插入icon图标的问题
在vue3中element-plus的字体图标如何使用
05-26
在Vue3中使用Element Plus的字体图标，你需要按照以下步骤进行操作： 1. 在你的Vue项目中安装Element Plus： ``` npm install element-plus --save ``` 2. 在你的Vue项目的main.js（或者其他入口文件）中引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值