App.vue

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

<script>
import { mapState } from 'vuex';
import { changeThemeColor } from '@/utils/themeUtil';
import langUtils from '@/utils/langUtils';

export default {
    name: 'App',
    data() {
        return {
            locale: {},
        };
    },
    created() {
        this.setHtmlTitle();
        this.setLanguage();
    },

    watch: {
        $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']),
    },
    methods: {
        setLanguage() {
            const lang = langUtils.get();
            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>