阅读 277

饿了么UI中的el-icon图标不生效问题分析并解决

问题描述

今天做项目的时候要做一个折叠左侧导航栏的功能。准备使用这个饿了么UI自带的折叠图标。图标长这样的:

图片.png

但是引入了以后,发现图标不生效。在页面中没有显示出来。控制台审查一下元素发现,i标签倒是有,但是宽高为0(宽高为0就相当于没有),审查元素的图示如下:

图片.png

又回头看了一下官网,官网上是有的啊,但是为啥页面上没有呢?难道是没有引入过来?看了看自己的代码是好的,然后就想到会不会是版本的问题,版本更新了以后,有一些图标被弃用了? 然后就看看package.json文件,发现我的elementui的版本号是2.4.11.如下图:

图片.png

好像版本是有点旧了。然后就去官网找对应2.4.11版本号的图标,看有没有这个折叠图标:

图片.png

回到以前版本看看

图片.png

解决方法

将elementui升级到具有el-icon-s-fold的折叠图标的版本即可。 执行命令npm i element-ui,就可以升级到最新版本的饿了么UI了,这样图标出出现了,哈哈问题解决。

图片.png

思路总结

版本的升级可能会新增一些特性或者去除一些特性,所以在我们项目使用某个特性的时候,如果没出现我们想要的效果的时候。首先要去审查代码,找BUG,如果确定我们的代码写的没有问题的话,我们就要考虑是不是版本不匹配的问题。

即:

出现问题-->排查问题-->定位问题-->解决问题

文章分类
前端
文章标签