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 }}