App.vue

<template>
    <a-config-provider :locale="locale" :get-popup-container="popContainer">
        <router-view />
    </a-config-provider>
</template>

<script>
import { enquireScreen } from './utils/commonUtil';
import { mapState, mapMutations } from 'vuex';
import { changeThemeColor } from '@/utils/themeUtil';

export default {
    name: 'App',
    data() {
        return {
            locale: {},
        };
    },
    created() {
        this.setHtmlTitle();
        this.setLanguage(this.lang);
        enquireScreen(isMobile => this.setDevice(isMobile));
    },

    watch: {
        lang(val) {
            this.setLanguage(val);
            this.setHtmlTitle();
        },
        $route() {
            this.setHtmlTitle();
        },
        'theme.mode'(val) {
            let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`);
            changeThemeColor(this.theme.color, val).then(closeMessage);
        },
        'theme.color'(val) {
            let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`);
            changeThemeColor(val, this.theme.mode).then(closeMessage);
        },
        layout() {
            window.dispatchEvent(new Event('resize'));
        },
    },
    computed: {
        //setting = mapStore.name
        ...mapState('settingModule', ['layout', 'theme', 'lang']),
    },
    methods: {
        ...mapMutations('settingModule', ['setDevice']),

        setLanguage(lang) {
            this.$i18n.locale = lang;
            switch (lang) {
                case 'zh_CN':
                    this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default;
                    break;
                case 'en_US':
                    this.locale = require('ant-design-vue/es/locale-provider/en_US').default;
                    break;
                default:
                    this.locale = require('ant-design-vue/es/locale-provider/en_US').default;
                    break;
            }
        },
        setHtmlTitle() {
            const route = this.$route;
            if (route.name) window.title = route.name;
        },
        popContainer() {
            return document.getElementById('popContainer');
        },
    },
};
</script>