新的项目对于客户自定义要求很高,然后换肤是其中一个很小的模块,经过了一段时间的摸索,看了许多文章,找到了几种方案。
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
这个博客步骤已经很详细了,但是他这个没有记录的功能,我在他的基础上写了一下存储记录的功能,退出后下次访问也会保留上次的数据。
跟上面的实现原理差不多。