大致效果.gif

image.png

image.png

大致的換膚效果如上圖所示分冈，只是利用js控制css中的變量簡單的做了個換膚功能，實(shí)際真正應(yīng)用到開發(fā)上的需要單獨(dú)提取一套scss文件作為主題導(dǎo)入只估。

1、頂部色值塊的下拉代碼

<el-dropdown @command="handleSkin">
      <span class="el-dropdown-link">
        更換系統(tǒng)主題<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着绷、根據(jù)自己挑選的顏色值傳入事件中去

 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導(dǎo)航菜單的樣式顏色

• 首先在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">供應(yīng)商管理</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>

• 使用計(jì)算屬性去修改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,
      };
    },
  },

• 使用監(jiān)聽器去監(jiān)聽vuex中的state

  watch: {
    // 監(jiān)聽色塊值
    "$store.state.skin"(newVal) {
      if (sessionStorage.getItem("skinColor")) {
        this.skin = JSON.parse(sessionStorage.getItem("skinColor"));
      }
    },
  },

• 當(dāng)組件實(shí)例化的時候進(jìn)行一次賦值

  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);
}