vue+webpack 更换主题N种方案优劣分析(2)

方式 动态切换 动态色值 支持变量 实现复杂度 兼容性 性能 维护性
class切换方式         简单   良好   良好    
ElementUI的实现         中等   良好   一般    
编译时多主题全量构建         复杂   良好   一般    
编译时选择性构建         中等   良好   良好    
less变量         复杂   良好      
css变量         中等     良好    
import动态加载         简单   良好   良好    

注:

动态切换:是否支持在运行时切换皮肤

动态设置:是否支持在运行时动态设置皮肤颜色

支持变量:是否可以再全局定义变量 less 文件,然后在不同的页面引用 less,依赖其中的变量,还是需要在全局 less 文件里面定义全局 class

实现复杂度: 需要修改的代码量包括构建工具和业务代码

兼容性: 主流浏览器支持程度

性能:包括代码的首屏加载的 size、切换的速度、切换的时候会不会有闪动

参考资料:


https://developer.mozilla.org/zh-CN/docs/Web/CSS/Alternative_style_sheets
https://less.bootcss.com

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/9f56200da8f676c223f4a609a11d30b0.html