VUE项目中Scss实现主题切换

• 项目中提到了全局切换主题的需求。在项目开发中切换主题用到主要技术有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

红色主题

end 简单的切换主题效果就实现了，后续可以用本地缓存，来实现刷新后依然记住切换后主题的功能