Vue3后台管理系统(七)Element-Plus国际化
Vue3后台管理系统(七)Element-Plus国际化
·
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为:
<!--src/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>
更多推荐
已为社区贡献10条内容
所有评论(0)