elementUIPLUS全局引入图标和动态组件显示踩坑

最新推荐文章于 2024-08-30 00:17:13 发布

高山我梦口香糖

最新推荐文章于 2024-08-30 00:17:13 发布

阅读量862

点赞数

分类专栏： bug 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/Madman528/article/details/125163635

版权

bug 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文探讨了在Vue项目中全局引入Element Plus图标库后，如何实现动态组件的加载。通过示例代码展示了在删除特定图标导入后，如何通过字符串方式正确显示动态组件。问题在于当不再直接导入 Fold 和 Expand 组件时，需使用字符串形式的组件名称来确保动态渲染的正确性。

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

原来是这样的,每次都要引入,麻烦死了

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

安装

yarn add @element-plus/icons-vue

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

Icon 图标 | Element Plus

问题来了,照理说我全局引入了,动态组件也可以用了吧,有代码如下

<el-row>
       <el-icon style="font-size:30px" @click="()=>(isfold=!isfold)"> 
         <component :is="isfold?Expand:Fold"></component>
        </el-icon>  
</el-row>

但是我把import {Fold,Expand} from '@element-plus/icons-vue'去掉就不显示了,

为什么?因为is绑定的是一个变量,刚好是我引进了个组件,去掉引进代码之后就没了,得加双引号,

<el-row>
      <el-icon style="font-size:30px" @click="()=>(isfold=!isfold)"> 
            <component :is="isfold?'Expand':'Fold'"></component>
      </el-icon>  
 </el-row>