最近因为某些原因,终于把一直纠结的主题方式及切换方式搞了出来。
设计思路
我能想到的主题切换方式无非两种:
- 一种是在body中加样式,对所有css进行命名空间(css前缀)处理
- 一种是类似Element自身的主题切换方式,通过编写scss改变主题
前一种方式在花裤衩同学的vue-element-admin中有具体的实现,项目主页:https://github.com/PanJiaChen/vue-element-admin
他是先将element自己提供的变量文件修改后生成新的css,然后将该css用gulp进行二次编辑增加命名空间,然后引入。也就是说他只是修改了UI框架的主题,并没有修改自己写的样式主题。
第二种方式则是element自己生成一个sass变量文件,执行命令行后生成新主题,然后让开发者自己导入。
以上两种其实都并没有实现项目本身自定义样式的主题切换,所以就产生了很多的问题。但仔细分析一下,其实我们只要将自己写的css样式也如同element官方那样打包一遍,然后动态引入就好了嘛。当然也可能是我傻,没想到还有其他方法。
介于以上总结,项目中设计的主题加载和切换方式大致流程如下:
1. 页面中仅引入基本样式
2. 页面初始化完成,动态加载主题文件
3. 用户切换主题:判断主题文件是否已经存在,存在则不操作;不存在则清空所有的主题文件,然后动态加载对应的主题文件。