在 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"