新的項目對於客戶自定義要求很高,然后換膚是其中一個很小的模塊,經過了一段時間的摸索,看了許多文章,找到了幾種方案。
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
這個博客步驟已經很詳細了,但是他這個沒有記錄的功能,我在他的基礎上寫了一下存儲記錄的功能,退出后下次訪問也會保留上次的數據。
跟上面的實現原理差不多。