element plus图标循环渲染的问题

初晨未凉

已于 2022-05-06 12:00:21 修改

阅读量1k

点赞数

分类专栏：笔记文章标签： vue.js elementui 前端

于 2022-05-06 11:58:04 首次发布

原文链接：https://blog.csdn.net/weixin_44306993/article/details/123899811

版权

笔记专栏收录该内容

59 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue项目中全局引入ElementPlus并为图标进行循环加载，以便在导航栏动态显示自定义图标。通过展示如何导入并注册ElementPlus的图标组件，确保在模板中使用<el-icon>时能正确显示。

摘要由CSDN通过智能技术生成

查阅到的博客：elementui plus 图标循环加载_Terint的博客-CSDN博客

全局引入（main.js）

完整的导入包

import { createApp } from "vue";

import ElementPlus from "element-plus";

import "element-plus/dist/index.css";

import * as ELIcons from "@element-plus/icons-vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";

const app = createApp(App);

for (let iconName in ELIcons) {

app.component(iconName, ELIcons[iconName]);

}

app.use(store).use(router).use(ElementPlus).mount("#app");

实际上elementplus图标需要的

import ElementPlus from "element-plus";

import "element-plus/dist/index.css";

import * as ELIcons from "@element-plus/icons-vue";

const app = createApp(App);

for (let iconName in ELIcons) {

app.component(iconName, ELIcons[iconName]);

}

app.use(ElementPlus).mount("#app");

页面中

源数据

navBarList: [

        { id: 1, title: "首页", icon: "home-filled" },

        { id: 2, title: "用户管理", icon: "avatar" },

        { id: 3, title: "店铺管理", icon: "platform" },

        { id: 4, title: "套餐与应用", icon: "postcard" },

        { id: 5, title: "升级与授权", icon: "opportunity" },

        { id: 6, title: "系统管理", icon: "edit" },

      ],

模板渲染

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