需求概况
换肤要求侧边栏背景色,所有button,switch,高亮文字颜色等同时改变
项目概况
基于element-ui
开发的vue
项目,实现换肤主要使用vue
样式绑定:style
及封装el-button
的组件,用户主题色存储在vuex
中
基本实现原理
想法比较无脑,控制主题颜色在vuex
中存储,通过样式绑定以及自定义组件实现样式变更以达到换肤效果
一步步实现
做到这里基本满足了目前版本的换肤需求,后期如果其他换肤需求会持续更新
ps:其实还想做得更人性化一点的换肤,即用户在色彩盘中选择自己喜欢的颜色进行换肤,实现原理基本一致,这里没有使用css
实现换肤就是有局限性,通过vuex
来存储变量后期的可扩展性更强
各位如有更好的建议欢迎补充~~~