|
1
|
<script>
|
|
2
3
4
5
6
|
import {colorList} from '@/components/tools/setting'
import ASwitch from 'ant-design-vue/es/switch'
import AList from "ant-design-vue/es/list"
import AListItem from "ant-design-vue/es/list/Item"
import {mixin} from '@/utils/mixin.js'
|
|
7
|
|
|
8
|
const Meta = AListItem.Meta
|
|
9
|
|
|
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
export default {
components: {
AListItem,
AList,
ASwitch,
Meta
},
mixins: [mixin],
data() {
return {}
},
filters: {
themeFilter(theme) {
const themeMap = {
'dark': '暗色',
'light': '白色'
|
|
26
|
}
|
|
27
|
return themeMap[theme]
|
|
28
|
},
|
|
29
30
31
32
33
|
},
methods: {
colorFilter(color) {
const c = colorList.filter(o => o.color === color)[0]
return c && c.key
|
|
34
35
|
},
|
|
36
37
38
39
40
|
onChange(checked) {
if (checked) {
this.$store.dispatch('ToggleTheme', 'dark')
} else {
this.$store.dispatch('ToggleTheme', 'light')
|
|
41
|
}
|
|
42
43
44
45
46
47
48
49
50
|
}
},
render() {
return (
<AList itemLayout="horizontal">
<AListItem>
<Meta>
<a slot="title">风格配色</a>
<span slot="description">
|
|
51
52
|
整体风格配色设置
</span>
|
|
53
54
55
56
57
58
59
60
61
62
63
|
</Meta>
<div slot="actions">
<ASwitch checkedChildren="暗色" unCheckedChildren="白色"
defaultChecked={this.navTheme === 'dark' && true || false} onChange={this.onChange}/>
</div>
</AListItem>
<AListItem>
<Meta>
<a slot="title">主题色</a>
<span slot="description">
页面风格配色: <a domPropsInnerHTML={this.colorFilter(this.primaryColor)}/>
|
|
64
|
</span>
|
|
65
66
67
68
|
</Meta>
</AListItem>
</AList>
)
|
|
69
|
}
|
|
70
|
}
|
|
71
72
73
74
75
|
</script>
<style scoped>
</style>
|