乐趣区

关于html5:饿了么UI中的elicon图标不生效问题分析并解决

问题形容

明天做我的项目的时候要做一个折叠左侧导航栏的性能。筹备应用这个饿了么 UI 自带的折叠图标。图标长这样的:

然而引入了当前,发现图标不失效。在页面中没有显示进去。控制台审查一下元素发现,i 标签倒是有,然而宽高为 0(宽高为 0 就相当于没有),审查元素的图示如下:

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

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

回到以前的版本看看

解决办法

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

思路总结

版本的降级可能会新增一些个性或者去除一些个性,所以在咱们我的项目应用某个个性的时候,如果没呈现咱们想要的成果的时候。首先要去审查代码,找 BUG,如果确定咱们的代码写的没有问题的话,咱们就要思考是不是版本不匹配的问题。
即:
呈现问题 –> 排查问题 –> 定位问题 –> 解决问题

退出移动版