auth-web/src/App.vue

61 lines
1.8 KiB
Vue
Raw Normal View History

2024-09-26 09:38:02 +08:00
<template>
<el-config-provider :locale="currentLocale">
<router-view />
<ReDialog />
</el-config-provider>
</template>
<script lang="ts" setup>
import { ElConfigProvider } from "element-plus";
import { computed, onMounted } from "vue";
import { ReDialog } from "@/components/BaseDialog";
import en from "element-plus/es/locale/lang/en";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import plusEn from "plus-pro-components/es/locale/lang/en";
import plusZhCn from "plus-pro-components/es/locale/lang/zh-cn";
import { useNav } from "@/layout/hooks/useNav";
import { useI18n } from "vue-i18n";
import { userI18nStore } from "@/store/i18n/i18n";
const i18nStore = userI18nStore();
const i18n = useI18n();
const { $storage } = useNav();
/**
* * 设置多语言内容
*/
const setI18n = async () => {
await i18nStore.fetchI18n();
const languageData = JSON.parse(localStorage.getItem("i18nStore") as any);
// 初始化设置多语言内容
const locale = $storage.locale.locale;
// 如果本地没有语言版本,设置为服务端默认内容
if (locale == "" || locale == null || !locale) {
const local = languageData.i18n.local;
i18n.locale.value = local;
$storage.locale = { locale: local };
i18n.mergeLocaleMessage(local, languageData.i18n[local]);
return;
}
i18n.locale.value = locale;
$storage.locale = { locale };
i18nStore.i18n.local = locale;
i18n.mergeLocaleMessage(locale, languageData.i18n[locale]);
};
/**
* * 当前语言类别
*/
const currentLocale = computed(() => {
const languageData = JSON.parse(localStorage.getItem("i18nStore") as any);
const local = languageData ? languageData.i18n.local : {};
return local === "zh" ? { ...zhCn, ...plusZhCn } : { ...plusEn, ...en };
});
onMounted(() => {
// 设置多语言
setI18n();
});
</script>