文章結構
現在使用自帶的圖片預覽插件---實現點擊按鈕預覽圖片列表el-image-viewer；訪問鏈接：https://element.eleme.cn/#/zh-CN/component/image
關於Element UI----是一套采用 Vue 2.0 作為基礎框架實現的組件庫，一套為開發者、設計師和產品經理准備的基於 Vue 2.0 的組件庫，提供了配套設計資源，幫助網站快速成型；在開發中，常常會使用其中的各種組件；
- icon庫
- 效果實現
- 問題
- 解決方案
icon庫
vue搭建的項目，使用的Element ui的icon圖標
核心點：Element ui 不同版本對應的icon不同
效果實現
如下圖：
點擊縮略圖，實現圖片預覽---功能有放大、縮小、全屏、旋轉等功能
問題
圖一為：開發時的樣子，后三個icon不展示
圖二為：升級Element ui版本后，前兩個icon不展示； 查看style,更改before的內容（如圖三），第一個圖標展示；
如下圖：
圖一
圖二
圖三
解決方案
- 在package.json文件中，找到element-ui,查看版本，升級版本；
- 升級方法---將element-ui修改為指定版本，（比如“element-ui”:'^2.15.3'）npm install就可以了。
- 在對應的css文件夾里，找到element-icons.ttf與element-icons.woff,將其與 使用的element-ui的版本保持一致
- 下載路徑
<a href="https://unpkg.com/browse/element-ui@2.5.4/"></a>
https://unpkg.com/browse/element-ui@2.5.4/ version中選擇對應的版本下載就🆗啦
- 查看是否有icon自定義，避免覆蓋
- 動態獲取的話，記得及時更新，重點是 版本一致
⭐心里藏着小星星~~~
⭐生活才能亮晶晶~~~
記得享受生命的每一天哦！！！