1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<template>
<div class='app-theme'>
<poptip
:title="$t('components.appTheme.caption.theme')"
popper-class='app-app-theme'
placement='bottom-end'
:width="Object.is($i18n.locale, 'zh-CN') ? 180 : 250">
<a>
<icon class='app-theme-icon' type='md-settings' :size="22" />
</a>
<template slot='content'>
<div class='app-theme-color'>
<template v-for="(theme, index) in defaultThemes">
<tooltip :content="theme.title" :key="index">
<div
:key="index"
:class="{ 'active': selectTheme == theme.tag, 'app-theme-item': true }"
:style="{ 'background': theme.color }"
@click="themeChange(theme.tag)">
</div>
</tooltip>
</template>
</div>
<div>
<i-form label-position='left'>
<form-item :label="$t('components.appTheme.caption.font')">
<i-select
:value="selectFont"
size='small'
:style="{ width: Object.is($i18n.locale, 'zh-CN') ? '100px' : '130px' }"
@on-change="fontChange"
transfer>
<template v-for="font in fontFamilys">
<i-option
:value="font.value"
:key="font.value">
{{$t(`components.appTheme.fontFamilys.${font.label}`)}}
</i-option>
</template>
</i-select>
</form-item>
</i-form>
</div>
</template>
</poptip>
</div>
</template>
<script lang = 'ts'>
import { Component, Vue } from 'vue-property-decorator';
import { appConfig } from '@/config/appConfig';
@Component({
})
export default class AppTheme extends Vue {
/**
* 所选择的主题
*
* @type {*}
* @memberof AppTheme
*/
selectTheme: any = '';
/**
* 激活主题
*
* @type {*}
* @memberof AppTheme
*/
public activeTheme: any;
/**
* 主题集合
*
* @type {Array<any>}
* @memberof AppTheme
*/
defaultThemes: Array<any> = appConfig.themes;
/**
* 所选择的字体
*
* @type {*}
* @memberof AppTheme
*/
public selectFont: any = '';
/**
* 字体集合
*
* @memberof AppTheme
*/
public fontFamilys = appConfig.fonts;
/**
* 挂载元素事件
*
* @memberof AppTheme
*/
public mounted() {
if (localStorage.getItem('theme-class')) {
this.selectTheme = localStorage.getItem('theme-class');
} else {
this.selectTheme = appConfig.defaultTheme;
}
if (localStorage.getItem('font-family')) {
this.selectFont = localStorage.getItem('font-family');
} else {
this.selectFont = appConfig.defaultFont;
}
}
/**
* 主题变化
*
* @param {*} val
* @memberof AppTheme
*/
public themeChange(val: any) {
if (!Object.is(this.selectTheme, val)) {
this.selectTheme = val;
localStorage.setItem('theme-class', val);
this.$router.app.$store.commit('setCurrentSelectTheme', val);
}
}
/**
* 字体变化
*
* @param {*} val
* @memberof AppTheme
*/
public fontChange(val: any) {
if (!Object.is(this.selectFont, val)) {
this.selectFont = val;
localStorage.setItem('font-family', val);
this.$router.app.$store.commit('setCurrentSelectFont', val);
}
}
}
</script>
<style lang="less">
@import './app-theme.less';
</style>