vue中實現@2x和@3x圖片加載,以及cssmap的使用方式


在前端開發中因為屏幕像素比的關系,經常要根據各種型號手機的dpi來加載不同分辨率的圖片,來提高性能以及更好的展示

在vue開發中秉承組件化的開發原則,所有和該組件相關的圖片應該和該組件在一個文件夾下,所以把這個組件全部相關的圖片放入組件目錄下,並按相同的規律命名文件

接下來定義一個mixin.less

在組件的樣式中引入這個混合變量,調用方式很簡單:

這樣這個圖標就能根據當前設備不同的dpi加載不同的圖片了

接下來在這個區塊的圖標也一樣,只不過這個圖標需要根據后台傳遞進來不同的參數來顯示不同的圖標

mock數據已經列出了全部可能展現的情況

因此我們這樣寫less,根據不同的類名來顯示不同圖片

在組件的created鈎子中添加一個cssmap,根據獲取的索引一一對應到相應的圖標上,完成根據后台數據的動態加載圖標的需求

 

改變json數據測試一下(改變mock數據測試需要重啟webserver)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM