app-theme.vue 4.1 KB
Newer Older
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
<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';
51
import { appConfig } from '@/config/appConfig';
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

@Component({
})
export default class AppTheme extends Vue {

    /**
     * 所选择的主题
     *
     * @type {*}
     * @memberof AppTheme
     */
    selectTheme: any = '';

    /**
     * 激活主题
     *
     * @type {*}
     * @memberof AppTheme
     */
    public activeTheme: any;

    /**
     * 主题集合
     *
     * @type {Array<any>}
     * @memberof AppTheme
     */
79
    defaultThemes: Array<any> = appConfig.themes;
80 81 82 83 84 85 86 87 88 89 90 91 92 93

    /**
     * 所选择的字体
     *
     * @type {*}
     * @memberof AppTheme
     */
    public selectFont: any = '';

    /**
     * 字体集合
     *
     * @memberof AppTheme
     */
94
    public fontFamilys = appConfig.fonts;
95 96 97 98 99 100 101 102 103 104

    /**
     * 挂载元素事件
     *
     * @memberof AppTheme
     */
    public mounted() {
        if (localStorage.getItem('theme-class')) {
            this.selectTheme = localStorage.getItem('theme-class');
        } else {
105
            this.selectTheme = appConfig.defaultTheme;
106 107 108 109
        }
        if (localStorage.getItem('font-family')) {
            this.selectFont = localStorage.getItem('font-family');
        } else {
110
            this.selectFont = appConfig.defaultFont;
111 112 113 114 115 116 117 118 119 120
        }
    }

    /**
     * 主题变化
     *
     * @param {*} val
     * @memberof AppTheme
     */
    public themeChange(val: any) {
121
        if (!Object.is(this.selectTheme, val)) {
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
            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>