e-icon-picker 从踩坑到解决

在 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 从踩坑到解决相关推荐

uniapp(小程序) 配置海康威视-萤石监控(直播替代方案) 踩坑与解决方法
uniapp(小程序) 配置海康威视-萤石监控(直播替代方案) 踩坑与解决方法因为公司业务需求需要获取监控的摄像头,萤石是给出了几种方案去实现. 直播接入:萤石开放平台API文档小程序接入:萤石 ...
Ubuntu18.04配置carla0.9.11踩坑与解决方法总结,同时解决安装carla-ros-bridge遇到的问题，并复现OpenCDA成功与ros关联
Ubuntu18.04配置carla0.9.11踩坑与解决方法总结,同时解决安装carla-ros-bridge遇到的问题,并复现OpenCDA成功与ros关联背景: 主要是为了复现叶小飞的Open ...
【踩坑经历】一次Asp.NET小网站部署踩坑和解决经历
2013年给1个大学的小客户部署过一个小型的Asp.NET网站,非常小,用的sqlite数据库,今年人家说要换台服务器,要重新部署一下,好吧,虽然早就过了服务时间,但无奈谁叫人家是客户了,二话不说,上 ...
crmeb商城部署（踩坑及解决方法）
源码地址: https://gitee.com/ZhongBangKeJi/CRMEB 原版是PHP版,我也不懂PHP,但看到功能很全,而且有docker-compose的脚本可以部署,并且教程也很完 ...
charts引入icon图片_v-charts 踩坑之路
最近要做一个大屏没有使用echarts 使用了更适合vue封装的v-charts组件库,第一次使用期间踩了不少坑,记录下来和大家分享一下. 废话不多说开始搞起来! 一.安装引入什么的大家自行百 ...
记录某项目中的踩坑与解决（持续更新）
前言最近参加了某个比赛, 我所选的赛题就是个类似知乎这样的安卓app,由于着手近一个月了,踩了不少坑,之前没怎么记录,估计事后也会忘记干净. 因此特开一帖,在此记录下相关的坑. 记录 Recycle ...
【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决
前后端对接必出bug,最近连续对接了两个项目,对解决跨域有点感觉了,跟大家分享一下经验,都是血的教训- 两个项目都是Springboot+Vue(axios网络请求).本人主要负责前端,所以前端会分享 ...
Failed to configure a DataSource: ‘url‘ attribute is not specified and no embedd（究极踩坑完美解决）
前言:Failed to configure a DataSource: 'url' attribute is not specified and no embedd这个错误想必大家已经非常非常熟悉了 ...
python 踩坑之解决django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module.Did you insta
1. 电脑无意点了升级之后就各种不正常,之前运行好好的django项目,突然出现我明明是安装了mysqlclient的,执行pip3 freeze能看到实际上我已经安装了mysqlclient. 2 ...

e-icon-picker 从踩坑到解决

e-icon-picker 从踩坑到解决相关推荐

最新文章

热门文章