vue+less換膚,主題切換方案


新的項目對於客戶自定義要求很高,然后換膚是其中一個很小的模塊,經過了一段時間的摸索,看了許多文章,找到了幾種方案。

https://www.cnblogs.com/leiting/p/11203383.html

1.直接在當前頁面寫多套css,

如header需要有三種顏色方案,直接寫三種方案,用一個狀態值保存,綁定class根據不同的狀態值使用不同的css

2.用less

寫一個主題方法,寫上顏色的參數,將需要用到的更改的樣式進行抽離

 

 這里相當於是一套樣式,然后根據參數更改不同的樣式,比如

 

 在main里面引入上一個 文件全局使用

然后在需要用到的頁面中使用即可

 

 即可。

有一個問題是這個更改的是全局的css屬性,整個項目設計到定義的樣式的時候都會發生改變,

最后存的時候采用localstorage存儲,這個是除非手動清除 則一直有效,可以記錄用戶之前的設置,關閉瀏覽器或者刷新頁面后都會存在。

 

 第三種方式,使用變量

這種的話用到才會改變,感覺相比起上面的就會好一點點

https://blog.csdn.net/weixin_47731144/article/details/107978728#comments_13356212

這個博客步驟已經很詳細了,但是他這個沒有記錄的功能,我在他的基礎上寫了一下存儲記錄的功能,退出后下次訪問也會保留上次的數據。

 

 跟上面的實現原理差不多。


免責聲明!

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



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