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

95 lines
2.7 KiB
Vue
Raw Normal View History

2022-06-21 15:48:41 +08:00
<!--
* @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
-->
2022-06-14 09:32:49 +08:00
<template>
<div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
<!-- <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
2022-06-20 19:34:41 +08:00
<svg class="icon-svg" aria-hidden="true">
<use xlink:href="#icon-setting"></use>
</svg>
</div> -->
2022-06-14 09:32:49 +08:00
<div class="aui-theme-tools__content">
<div class="aui-theme-tools__item">
<h3>Navbar</h3>
2022-06-20 19:34:41 +08:00
<el-checkbox
v-model="$store.state.navbarLayoutType"
true-label="colorful"
>colorful 鲜艳</el-checkbox
>
2022-06-14 09:32:49 +08:00
</div>
<div class="aui-theme-tools__item">
<h3>Sidebar</h3>
2022-06-20 19:34:41 +08:00
<el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark"
>dark 黑色</el-checkbox
>
2022-06-14 09:32:49 +08:00
</div>
<div class="aui-theme-tools__item">
<h3>Theme</h3>
<el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
2022-06-20 19:34:41 +08:00
<el-radio
v-for="item in themeList"
:key="item.name"
:label="item.name"
>{{ `${item.name} ${item.desc}` }}</el-radio
>
2022-06-14 09:32:49 +08:00
</el-radio-group>
</div>
</div>
</div>
</template>
<script>
export default {
2022-06-20 19:34:41 +08:00
data() {
2022-06-14 09:32:49 +08:00
return {
isOpen: false,
2022-06-20 19:34:41 +08:00
themeList: require("@/element-ui/config.js"),
2022-06-21 15:48:41 +08:00
themeColor: "blue",
2022-06-20 19:34:41 +08:00
};
2022-06-14 09:32:49 +08:00
},
2022-06-21 15:48:41 +08:00
mounted() {
this.themeColorChangeHandle("blue");
},
2022-06-14 09:32:49 +08:00
methods: {
2022-06-20 19:34:41 +08:00
themeColorChangeHandle(val) {
2022-06-14 09:32:49 +08:00
var styleList = [
{
2022-06-20 19:34:41 +08:00
id: "J_elementTheme",
url: `${
process.env.BASE_URL
}element-theme/${val}/index.css?t=${new Date().getTime()}`,
2022-06-14 09:32:49 +08:00
},
{
2022-06-20 19:34:41 +08:00
id: "J_auiTheme",
url: `${
process.env.BASE_URL
}element-theme/${val}/aui.css?t=${new Date().getTime()}`,
},
];
2022-06-14 09:32:49 +08:00
for (var i = 0; i < styleList.length; i++) {
2022-06-20 19:34:41 +08:00
var el = document.querySelector(`#${styleList[i].id}`);
2022-06-14 09:32:49 +08:00
if (el) {
2022-06-20 19:34:41 +08:00
el.href = styleList[i].url;
continue;
2022-06-14 09:32:49 +08:00
}
2022-06-20 19:34:41 +08:00
el = document.createElement("link");
el.id = styleList[i].id;
el.href = styleList[i].url;
el.rel = "stylesheet";
document.querySelector("head").appendChild(el);
2022-06-14 09:32:49 +08:00
}
2022-06-20 19:34:41 +08:00
},
},
};
2022-06-14 09:32:49 +08:00
</script>
2022-06-20 19:34:41 +08:00
<style scoped lang="scss">
.aui-theme-tools__toggle {
background-color: #0058e1;
}
</style>