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

62 lines
1.9 KiB
Vue
Raw Normal View History

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">
<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: 'turquoise'
}
},
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>