e-icon-picker 从踩坑到解决

最新推荐文章于 2024-09-09 09:12:04 发布

原创最新推荐文章于 2024-09-09 09:12:04 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

在vue-element-admin项目中使用e-icon-picker组件时遇到渲染异常，表现为选择框空白无反应。尝试过更换e-icon-picker版本至1.1.6，升级element-ui和vue到最新版本，但问题依旧存在。在升级vue至2.7.0后出现parseComponentofundefined的错误，可能因vue-template-compiler版本不匹配导致。

在 vue-element-admin 上使用了 e-icon-picker ，但是一直渲染不出来，也没有任何报错

1.安装

npm install e-icon-picker -S

2.全局引入

// main.js
import eIconPicker from "e-icon-picker";
import "e-icon-picker/lib/symbol.js"; // 基本彩色图标库
import "e-icon-picker/lib/index.css"; // 基本样式，包含基本图标
import "font-awesome/css/font-awesome.min.css"; // font-awesome 图标库
import "element-ui/lib/theme-chalk/icon.css"; // element-ui 图标库

Vue.use(eIconPicker, {
    FontAwesome: true,
    ElementUI: true,
    eIcon: true, // 自带的图标，来自阿里妈妈
    eIconSymbol: true, // 是否开启彩色图标
    addIconList: [],
    removeIconList: [],
    zIndex: 99999// 选择器弹层的最低层,全局配置
})

3.使用

<e-icon-picker v-model="form.icon">
  <template #prepend="{ icon }">
    <e-icon :icon-name="icon" class="e-icon" />
  </template>
  <template #icon="{ icon }">
    <e-icon :icon-name="icon" class="e-icon" />
  </template>
</e-icon-picker>

跑完之后应该出现选择框的位置一片空白，点击没有任何反应

4.网上查到1.1.7这个版本可能有问题，将 1.1.7版本替换为1.1.6

"e-icon-picker": "1.1.6",

跑完并没有解决问题，还是一片空白

5.升级 element-ui 的版本

"element-ui": "2.15.7",

无效

6.升级 vue 的版本
官方文档提到，图标列表不显示是vue的一个bug，在vue-element-admin中发现，这个问题的主要原因是vue的2.6.13以前的版本和2.6.13以及2.6.14版本之间的问题，vue也没给出解决的办法，既然只出现在这些版本，那就避免用这些版本

"vue": "2.7.0",

重跑报错

Cannot read property ‘parseComponent‘ of undefined

7.升级 vue-template-compiler
vue 与 vue-template-compiler 的版本号需要一致

"vue-template-compiler": "2.7.0"

e-icon-picker

e-icon-picker 从踩坑到解决

2 条评论