Vue3后台管理系统（七）Element-Plus国际化

爱被打了一巴掌 2024-03-26 12:12 58阅读 0赞

Element Plus 官方提供全局配置 Config Provider实现国际化

#### 一、配置： ####

在src/store/modules文件夹下新建app文件，然后在app文件夹下新建index.ts内容如下

// src/store/modules/app/index.ts
    import {
        getSidebarStatus,
        setSidebarStatus,
        getSize,
        setSize,
        setLanguage
    } from '@/utils/localStorage';
    import {defineStore} from 'pinia';
    import {getLanguage} from '@/lang';
    import {computed, reactive, ref} from 'vue';
    import {useStorage} from '@vueuse/core';
    
    // Element Plus 语言包
    import zhCn from 'element-plus/es/locale/lang/zh-cn';
    import en from 'element-plus/es/locale/lang/en';
    
    export enum DeviceType {
        mobile,
        desktop
    }
    
    export enum SizeType {
        default,
        large,
        small
    }
    
    // setup
    export const useAppStore = defineStore('app', () => {
        // state
        const device = useStorage<string>('device', 'desktop');
        const size = ref(getSize() || 'default');
        const language = ref(getLanguage());
        const sidebar = reactive({
            opened: getSidebarStatus() !== 'closed',
            withoutAnimation: false
        });
    
        const locale = computed(() => {
            if (language?.value == 'en') {
                return en;
            } else {
                return zhCn;
            }
        });
    
        // actions
        function toggleSidebar(withoutAnimation: boolean) {
            sidebar.opened = !sidebar.opened;
            sidebar.withoutAnimation = withoutAnimation;
            if (sidebar.opened) {
                setSidebarStatus('opened');
            } else {
                setSidebarStatus('closed');
            }
        }
    
        function closeSideBar(withoutAnimation: boolean) {
            sidebar.opened = false;
            sidebar.withoutAnimation = withoutAnimation;
            setSidebarStatus('closed');
        }
    
        function openSideBar(withoutAnimation: boolean) {
            sidebar.opened = true;
            sidebar.withoutAnimation = withoutAnimation;
            setSidebarStatus('opened');
        }
    
        function toggleDevice(val: string) {
            device.value = val;
        }
    
        function changeSize(val: string) {
            size.value = val;
            setSize(val);
        }
    
        function changeLanguage(val: string) {
            language.value = val;
            setLanguage(val);
        }
    
        return {
            device,
            sidebar,
            language,
            locale,
            size,
            toggleDevice,
            changeSize,
            changeLanguage,
            toggleSidebar,
            closeSideBar,
            openSideBar
        };
    });

#### 二、全局化 ####

修改App.vue为：

<script setup lang="ts">
    import { ElConfigProvider } from 'element-plus';
    import { useAppStore } from '@/store/modules/app';
    const appStore = useAppStore();
    </script>
    
    <template>
      <el-config-provider :locale="appStore.locale" :size="appStore.size">
        <router-view />
      </el-config-provider>
    </template>