vue+less换肤,主题切换方案

时间:2022-09-26 01:11:30

新的项目对于客户自定义要求很高,然后换肤是其中一个很小的模块,经过了一段时间的摸索,看了许多文章,找到了几种方案。

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

1.直接在当前页面写多套css,

如header需要有三种颜色方案,直接写三种方案,用一个状态值保存,绑定class根据不同的状态值使用不同的css

2.用less

写一个主题方法,写上颜色的参数,将需要用到的更改的样式进行抽离

vue+less换肤,主题切换方案

这里相当于是一套样式,然后根据参数更改不同的样式,比如

vue+less换肤,主题切换方案

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

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

vue+less换肤,主题切换方案

即可。

有一个问题是这个更改的是全局的css属性,整个项目设计到定义的样式的时候都会发生改变,

最后存的时候采用localstorage存储,这个是除非手动清除 则一直有效,可以记录用户之前的设置,关闭浏览器或者刷新页面后都会存在。

vue+less换肤,主题切换方案

第三种方式,使用变量

这种的话用到才会改变,感觉相比起上面的就会好一点点

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

这个博客步骤已经很详细了,但是他这个没有记录的功能,我在他的基础上写了一下存储记录的功能,退出后下次访问也会保留上次的数据。

vue+less换肤,主题切换方案

跟上面的实现原理差不多。