Skip to content

国际化

y9 组件默认使用简体中文,如果你希望使用其他语言,你可以参考下面的方案

方案一: 全局配置 (在 main.ts 文件配置)

js
import { createApp } from "vue";
import { setupStore } from "@/store";
import y9pluginComponents from "y9plugin-components";
import y9_zhCn from "y9plugin-components/src/language/zh-cn"; //默认的y9组件插件中文包
import y9_en from "y9plugin-components/src/language/en"; //默认的y9组件插件英文包
import { useSettingStore } from "@/store/modules/settingStore";
const app: any = createApp(App);
setupStore(app);
let opts = ref({}); //y9组件选项配置
watch(
  () => useSettingStore().getWebLanguage, //监听语言变化,配置对应的语言包
  (newLang) => {
    opts.value.locale = newLang === "en" ? y9_en : y9_zhCn;
  },
  {
    immediate: true,
  }
);
app.use(y9pluginComponents, opts.value);
app.mount("#app");

方案二: ConfigProvider (在 App.vue 文件配置)

vue
<script lang="ts" setup>
//y9组件语言包
import y9_zhCn from "y9plugin-components/src/language/zh-cn";
import y9_en from "y9plugin-components/src/language/en";
//框架的store
import { useSettingStore } from "@/store/modules/settingStore";
const settingStore = useSettingStore();

//监听语言配置的变化,传入对应的语言包
let y9_locale = ref({});
watch(
  () => useSettingStore().getWebLanguage, //监听语言变化,传入对应的语言包
  (newLang) => {
    y9_locale.value = newLang === "en" ? y9_en : y9_zhCn;
  },
  {
    immediate: true,
  }
);
</script>

<template>
  <y9-config-provider :locale="y9_locale">
    <router-view></router-view>
  </y9-config-provider>
  <template></template>
</template>

Released under the GPL-3.0 License.