hi-ucs/back/src/views/main-theme-tools.vue

<!--
 * @Author: kongjun qdkongjun@gmail.com
 * @Date: 2022-06-20 09:29:59
 * @LastEditors: kongjun qdkongjun@gmail.com
 * @LastEditTime: 2022-06-21 11:36:51
 * @FilePath: \back\src\views\main-theme-tools.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
    <!-- <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
      <svg class="icon-svg" aria-hidden="true">
        <use xlink:href="#icon-setting"></use>
      </svg>
    </div> -->
    <div class="aui-theme-tools__content">
      <div class="aui-theme-tools__item">
        <h3>Navbar</h3>
        <el-checkbox
          v-model="$store.state.navbarLayoutType"
          true-label="colorful"
          >colorful 鲜艳</el-checkbox
        >
      </div>
      <div class="aui-theme-tools__item">
        <h3>Sidebar</h3>
        <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark"
          >dark 黑色</el-checkbox
        >
      </div>
      <div class="aui-theme-tools__item">
        <h3>Theme</h3>
        <el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
          <el-radio
            v-for="item in themeList"
            :key="item.name"
            :label="item.name"
            >{{ `${item.name} ${item.desc}` }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      themeList: require("@/element-ui/config.js"),
      themeColor: "blue",
    };
  },
  mounted() {
    this.themeColorChangeHandle("blue");
  },
  methods: {
    themeColorChangeHandle(val) {
      var styleList = [
        {
          id: "J_elementTheme",
          url: `${
            process.env.BASE_URL
          }element-theme/${val}/index.css?t=${new Date().getTime()}`,
        },
        {
          id: "J_auiTheme",
          url: `${
            process.env.BASE_URL
          }element-theme/${val}/aui.css?t=${new Date().getTime()}`,
        },
      ];
      for (var i = 0; i < styleList.length; i++) {
        var el = document.querySelector(`#${styleList[i].id}`);
        if (el) {
          el.href = styleList[i].url;
          continue;
        }
        el = document.createElement("link");
        el.id = styleList[i].id;
        el.href = styleList[i].url;
        el.rel = "stylesheet";
        document.querySelector("head").appendChild(el);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.aui-theme-tools__toggle {
  background-color: #0058e1;
}
</style>