Vue 3动态添加element plus icon

861 阅读1分钟

1,在main.js中全局引入element plus icon

import * as ElIconModules from '@element-plus/icons-vue';//导入所有element icon图标

// 全局注册element-plus icon图标组件

Object.keys(ElIconModules).forEach((key) => {//循环遍历组件名称

if ("Menu" !== key) {//如果不是图标组件不是Menu,就跳过,否则加上ICon的后缀

app.component(key, ElIconModules[key]);

} else {

app.component(key + "Icon", ElIconModules[key]);

}

});

注:因为我这边局部引入的时候,使用动态添加icon不报错,但是icon显示不出来,检查元素的时候发现icon名大写变小写了,没有找到其他的解决方案,搜索之后尝试全局引入,可以了。如果有其他的好的方法,也欢迎提供。

2,组件中使用

目录数据

let menuList = ref([

{id: 1, title: '后台首页', name: 'Home', icon: 'HomeFilled'},

{id: 2, title: '相册管理', name: 'PictureManage', icon: 'PictureFilled'},

{id: 3, title: '商品列表', name: 'ShopList', icon: 'Shop'}

])

<el-menu

active-text-color="#409EFF"

class="el-menu-vertical-demo"

:default-active="activeIndex"

>

<el-menu-item v-for="item in menuList" :index="item.id" :key="item.id" @click="goPath(item.name)">

{{ item.title }}