vue3 使用element-plus动态渲染Icon图标

山野见

已于 2024-04-09 23:48:32 修改

阅读量586

点赞数 4

文章标签： vue.js elementui javascript

于 2024-04-09 19:49:02 首次发布

本文链接：https://blog.csdn.net/2301_79204074/article/details/137564962

版权

今天使用vue3+vite重构项目的时候，构建侧边栏的时候需要动态渲染图标

之前的写法是

<i class="el-icon-menu"></i>

这样就可以写一个数组，动态的绑定class

但是在vue3中不能这样使用

官方给出的实例是这样的

<el-icon><Plus /></el-icon>

但是这样动态渲染就不行了，找了半天，终于看到可以使用内置的component组件

//main.js

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

app.component(key, component)

}

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

山野见

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue3 - Element Plus 动态渲染＜el-icon＞图标组件，根据三元表达式条件、v-if 指令动态判断图标并渲染图标组件， v-for 循环动态图标组件（提供详细示例代码教程）

王佳斌

09-08

5662

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

662

Vue3【常见UI组件库、Vue3加载Element-plus 、Vue3加载Element-plus的字体图标】(十六)-全面详解（学习总结---从入门到深化）

参与评论您还未登录，请先登录后发表或查看评论

vue3 elementplus el-Icon 动态渲染点击切换icon图标组件

qq_45864922的博客

01-08

3326

vue3 elementplus Icon 动态渲染切换icon组件

vue3 中使用 icon 图标的 3 种方案

最新发布

2301_80826038的博客

09-11

2405

这里我封装的支持 prefix、name、size、color、spin（是否旋转）等属性。我们在浏览器中打开调试工具，看看 application ，发现这里缓存的一些图标。这里注意 iconDirs 的路径，是读取的 svg icon 存放的目录。下次请求的时候直接从缓存中读取的。如果 element 的 icon 不满足我们的需求的话，我们可以从。iconify 是一种非常广泛的图标解决方案，它收集了全网所有的图标。如果你想用字符串的形式，可以这样搞。下载一个 svg 格式的图标。

Vue3 Element Plus 动态渲染＜el-icon＞

会写点代码

06-16

381

vue3 element plus 实现el-icon 图标组件动态渲染

Vue3 element-plus动态Icon图标解决方法

su6666v的博客

04-06

1978

然后在main.js或者mian.ts中导入并设置全局变量。至于图标名称，则是官网上列举的这些。

vue3 动态图标icon ＜el-icon

qq_36164225的博客

02-07

2820

在表格中使用，渲染出每一行不同的图标。

Vue3 Ant Design不再支持＜a-icon＞，怎么动态渲染图标

qq_43751614的博客

07-21

935

在旧版本中，字体图标库都是根据type来区分显示，但是新版本中ant的子图图标全部都变成标签显示了，于是在循环图标的时候，依据往常的已经不能实现了如果还需要和老版本保持一致书写习惯，可采用以下方法。

Vue3中element-plus全局使用Icon图标

m0_67393342的博客

03-09

2760

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

利用 vite 初始化一个vue3项目实现element-plus以及element-icon页面渲染

guinue的博客

04-09

394

原文改编自：http://t.csdn.cn/W0Vtl。前人栽树，后人乘凉。

vue3 动态加载el-icon图标

周家大小姐

05-28

9701

安装插件 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+ElementPlus-【动态绑定icon】

weixin_55049839的博客

07-31

400

官网找到icon图标使用说明，并安装。2. 把需要用到的图标正确导入。4.在template使用。

vue3如何动态渲染Element-plus图标

cjp1223的博客

03-17

1105

所以在vue2中使用Element UI动态变换图标时就可以通过：class的方式渲染图标。但是Element Plus就不行了，我们知道引用的图标是。1.首先我在data中定义好需要展示的图标。2.然后再setup中进行一个定义。1.首先将需要展示的组件进行导入。3.然后进行动态渲染。

Element-Plus-动态渲染 ICON

Sunny_boy

05-17

974

【代码】Element-Plus-动态渲染 ICON。

vue3图片不显示？vue3正确动态渲染图片和背景图片——粘贴即可用，亲测好用

lwc18639470699的博客

10-20

3038

vue2是用require引入图片的。在vue3中require会报require is not defined。上代码：vue3中写个方法，方便后期调用。背景图片绑定style写入对应样式即可。在img中src绑定传入路径即可。

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

wocao2dai的博客

05-05

754

如果想在渲染菜单时动态使用icon图标，需要在标签内加入<component />就中间的内容比较重要，详细的看原文。省略v-for代码。

vue3需要动态引入icon图标解决方法

CHENC0518的博客

01-09

1702

vue3需要动态引入icon图标解决方法

Elementui-Plus动态渲染图标icon

唯有热爱可抵万难

08-20

595

处理后，即可通过icon值进行动态渲染图标，图标大小可以通过svg样式进行控制！二、使用 component 组件进行动态加载。

Vue3 antdv 如何动态渲染 icons-vue 图标

m0_55333789的博客

07-19

322

Vue3 antdv 如何动态渲染 icons-vue 图标

vue3 elementplus 动态菜单

05-01

Vue3和Element Plus是一对强力组合，能够提供丰富的功能和灵活的交互效果。其中，动态菜单是Element Plus很重要的一个特性，能够让用户自定义菜单，并且根据权限控制菜单的展示。下面将介绍如何在Vue3中使用Element Plus实现动态菜单。首先，我们需要定义一份菜单数据，包括菜单的名称、路径、图标、权限等信息。可以使用Vue3中的Composition API来实现： ``` javascript import { ref } from 'vue' export default function useMenu() { const menus = ref([ {name: '首页', path: '/', icon: 'el-icon-s-home', roles: ['admin', 'user']}, {name: '设置', path: '/setting', icon: 'el-icon-setting', roles: ['admin']}, {name: '个人中心', path: '/profile', icon: 'el-icon-s-custom', roles: ['user']} ]); return { menus } } ``` 然后，在菜单组件中，我们可以使用v-for和el-menu组件来渲染菜单： ``` html <template> <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect"> <template v-for="menu in visibleMenus"> <template v-if="!menu.children"> <el-menu-item :key="menu.path" :index="menu.path"> <i :class="menu.icon"></i> <span>{{ menu.name }}</span> </el-menu-item> </template> <template v-else> <el-submenu :key="menu.path" :index="menu.path"> <template #title> <i :class="menu.icon"></i> <span>{{ menu.name }}</span> </template> <el-menu-item v-for="(childMenu, index) in menu.children" :key="childMenu.path" :index="childMenu.path"> <i :class="childMenu.icon"></i> <span>{{ childMenu.name }}</span> </el-menu-item> </el-submenu> </template> </template> </el-menu> </template> <script> import useMenu from '@/hooks/useMenu'; export default { setup() { const { menus } = useMenu(); const activeMenu = ref('/'); const visibleMenus = computed(() => { const userRoles = ['admin']; // 假设当前用户的角色为admin return menus.filter(menu => { return menu.roles.some(role => userRoles.includes(role)); }); }); function handleMenuSelect(index) { activeMenu.value = index; } return { activeMenu, visibleMenus, handleMenuSelect } } } </script> ``` 在上述代码中，我们使用computed属性过滤展示可见的菜单，并使用ref属性记录当前活跃的菜单。当菜单被选择时，我们更新活跃菜单的值，从而使当前选项突出显示。最后，我们可以将菜单组件添加到Vue3的路由中，以便它能够随着路由的变化进行动态更新。总的来说，Vue3和Element Plus能够轻松实现动态菜单，为用户提供更加灵活和可控的交互体验。亲身体验后，你会感到非常满意！