- 项目中提到了全局切换主题的需求。在项目开发中切换主题用到主要技术有Scss，Vuex。
一、Scss部分
- 实现思路：因为要实现主题的切换，所以在开发组件中涉及到主题的地方，要提取一些公用的变量，不要直接写死样式值。但是如果只是定义一些变量的话，只是完成控制颜色等值的提取。还是无法实现用户在前端点击对应的主题，即可批量的切换颜色的需求。因此必定要用到映射表来批量替换提取的这些控制变量。所以根据以上思路实现如下：
- 定义变量以及映射表
// 默认主题
$default-theme : (
base-color: #ddd,
border-color: #000
);
//红色主题
$red-theme : (
base-color: red,
border-color: red
);
//定义映射集合
$themes: (
default-theme: $default-theme,
red-theme: $red-theme
);
- 定义方法,循环遍历映射集合，生成对应样式表
@mixin base-background(){
@each $themename , $theme in $themes {
[data-theme = '#{$themename}'] & {
background: map-get($map: $theme, $key: base-color )
}
}
}
- 在组件中,引入公共文件，在要用到的地方使用定义好的mixin
@import 'theme.scss'
.block {
width: 1000px;
@include base-background();
}
-
编译完成会生成如下代码。可见对应主题下面的块，会表现出对应的主题颜色。
生成样式
二、VUE部分
- scss部分已经生成了符合需求的样式，剩下的就是要把自定义属性data-theme挂在合适的位置，然后定义切换主题逻辑。此处我用的vuex，可以不用vuex。
- 定义vuex
state:
const state = {
nowThemeInfo: 'default-theme', //当前主题
themes: ['default', 'red'] //所有主题
}
mutation:
SET_THEMEINFO(state, theme){
state.nowThemeInfo = theme + '-theme';
}
- 入口文件
template:
<div class="zh-cn" :data-theme='nowThemeInfo'>
<router-view/>
</div>
script: 计算属性引入state
computed: {
...Vuex.mapState(['nowThemeInfo'])
}
- 切换主题组件
template:
<div>
<el-select v-model="value" :placeholder="themes[0]" @change="changeTheme">
<el-option
v-for="item in themes"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
script: method引入mutation，然后定义change方法
...Vuex.mapMutations(['SET_THEMEINFO']),
changeTheme(value){
this.SET_THEMEINFO(value)
}
三、效果如下
default-theme
默认主题
切换red-theme
红色主题
