使用js去控制css中的变量值完成一个简单的换肤功能

大致的换肤效果如上图所示，只是利用js控制css中的变量简单的做了个换肤功能，实际真正应用到开发上的需要单独提取一套scss文件作为主题导入。

1、顶部色值块的下拉代码

<el-dropdown @command="handleSkin">
      <span class="el-dropdown-link">
        更换系统主题<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="grey"
          ><span class="colorGrey"></span
        ></el-dropdown-item>
        <el-dropdown-item command="blue"
          ><span class="colorBlue"></span
        ></el-dropdown-item>
        <el-dropdown-item command="green"
          ><span class="colorGreen"></span
        ></el-dropdown-item>
        <el-dropdown-item command="dark"
          ><span class="colorDark"></span
        ></el-dropdown-item>
        <el-dropdown-item command="purple"
          ><span class="colorPurple"></span
        ></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

2、根据自己挑选的颜色值传入事件中去

 handleSkin(command) {
      switch (command) {
        case "grey":
          this.changeColor("rgba(255,255,255,.7)", "#7f8c8d", "#333", "#ccc");
          break;
        case "blue":
          this.changeColor(
            "rgba(255,255,255,.7)",
            "#2c3e50",
            "#4A7F82",
            "#2c3e50"
          );
          break;
        case "green":
          this.changeColor(
            "rgba(255,255,255,.7)",
            "#1E5B61",
            "#4A7F82",
            "#1E5B61"
          );
          break;
        case "dark":
          this.changeColor(
            "rgba(255,255,255,.7)",
            "#001529",
            "#000c17",
            "#001529"
          );
          break;
        case "purple":
          this.changeColor(
            "rgba(255,255,255,.7)",
            "#512DA8",
            "#9575CD",
            "#512DA8"
          );
          break;
        default:
          break;
      }
    },
    // 换肤颜色的切换
    changeColor(fontColor, defaultColor, selectColor, hoverColor) {
      this.color = {
        fontColor: fontColor,
        defaultColor: defaultColor,
        selectColor: selectColor,
        hoverColor: hoverColor,
      };
      this.$store.commit("setSkin", this.color);
      sessionStorage.setItem("skinColor", JSON.stringify(this.color));
    },

3、Vuex存储不同颜色对象共享

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    skin:{},//色块值
  },
  mutations: {
    setSkin(state, payload){
      state.skin = payload;
    }
  },
  actions: {},
  modules: {}
})

4、修改el-menu导航菜单的样式颜色

• 首先在el-menu上绑定一个style属性

    <el-menu
      :style="styleProps"
      class="el-menu-vertical-demo"
      :router="true"
      :collapse="isCollapse"
    >
      <el-menu-item index="/workbench">
        <i class="el-icon-s-grid"></i>
        <span slot="title">工作台</span>
      </el-menu-item>
      <el-menu-item index="/member">
        <i class="el-icon-s-management"></i>
        <span slot="title">会员管理</span>
      </el-menu-item>
      <el-menu-item index="/supplier">
        <i class="el-icon-s-marketing"></i>
        <span slot="title">供应商管理</span>
      </el-menu-item>
      <el-menu-item index="/commodity">
        <i class="el-icon-s-goods"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
      <el-menu-item index="/staff">
        <i class="el-icon-user-solid"></i>
        <span slot="title">员工管理</span>
      </el-menu-item>
    </el-menu>

• 使用计算属性去修改styleProps

  computed: {
    styleProps() {
      return {
        "--fontColor": this.skin.fontColor || this.defaultSkin.fontColor,
        "--defaultColor":
          this.skin.defaultColor || this.defaultSkin.defaultColor,
        "--selectColor": this.skin.selectColor || this.defaultSkin.selectColor,
        "--hoverColor": this.skin.hoverColor || this.defaultSkin.hoverColor,
      };
    },
  },

• 使用监听器去监听vuex中的state

  watch: {
    // 监听色块值
    "$store.state.skin"(newVal) {
      if (sessionStorage.getItem("skinColor")) {
        this.skin = JSON.parse(sessionStorage.getItem("skinColor"));
      }
    },
  },

• 当组件实例化的时候进行一次赋值

  mounted() {
    if (sessionStorage.getItem("skinColor")) {
      this.skin = JSON.parse(sessionStorage.getItem("skinColor"));
    }
  },

5、css中使用变量去替换原有的色值样式

.header >>> .el-menu {
  height: 100%;
  background: var(--defaultColor);
}
/* 单个悬浮的子菜单的样式 */
.header >>> .el-menu-item:hover {
  background: var(--selectColor);
}
.header >>> .el-menu-item:focus {
  background: var(--selectColor);
}
.header >>> .el-submenu__title {
  color: var(--fontColor);
}
.header >>> .el-menu-item {
  color: var(--fontColor);
}
.header >>> .el-submenu__title:hover {
  background: var(--selectColor);
}