国际化

@wocwin/t-ui-plus 组件的国际化完全兼容 Element Plus 的国际化，如果需要配置国际化，只需要在 Element Plus 语言包的基础上合并 TuiPlus 的语言包即可。

示例

全局配置

在 Element Plus 的配置上合并语言包。

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// import en from 'element-plus/es/locale/lang/en'
import plusZhCn from '@wocwin/t-ui-plus/locale/zh-cn'
// import plusEn from '@wocwin/t-ui-plus/locale/en'

app.use(ElementPlus, {
  locale: { ...zhCn, ...plusZhCn }
})

ConfigProvider 推荐

在 Element Plus 的 ConfigProvider 合并语言包。

<template>
  <el-config-provider :locale="locale"> *** </el-config-provider>
</template>

<script setup>
  import { ElConfigProvider } from 'element-plus'
  import { useGlobalStore } from "@/store/modules/global"; // 引入pinia全局状态管理
  import en from 'element-plus/es/locale/lang/en'
  import zhCn from 'element-plus/es/locale/lang/zh-cn'
  import plusZhCn from '@wocwin/t-ui-plus/locale/zh-cn'
  import plusEn from '@wocwin/t-ui-plus/locale/en'

  const zhCnLocales = {
    ...zhCn,
    ...plusZhCn
  }
  const enLocales = {
    ...en,
    ...plusEn
  }

  const globalStore = useGlobalStore();
  const locale = computed(() => (globalStore.language === 'zh' ? zhCnLocales : enLocales))

</script>