<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>主题</h3>
|
<div style="margin: 20px 0">
|
<el-radio-group v-model="$store.state.theme" size="mini" @change="themehangeHandle">
|
<el-radio-button label="light">浅色</el-radio-button>
|
<el-radio-button label="high">深色</el-radio-button>
|
</el-radio-group>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Cookies from 'js-cookie'
|
|
export default {
|
data() {
|
return {
|
isOpen: false,
|
themeColor: ''
|
}
|
},
|
created() {
|
let that = this
|
this.$EventBus.$on('changeTheme', function () {
|
that.isOpen = true
|
})
|
},
|
watch: {
|
themeColor(val) {
|
this.$router.go(0)
|
}
|
},
|
methods: {
|
themehangeHandle(val) {
|
this.themeColor = val
|
Cookies.set('systemTheme', val)
|
let body = document.querySelector('body')
|
let clazz = body.className
|
clazz = clazz.replace(' light', '').replace(' high', '')
|
body.className = clazz + ' ' + val
|
this.isOpen = false
|
}
|
}
|
}
|
</script>
|
