国际化

组件内置文案默认中文。切换语言有两种方式。

直接切换语言包

未使用 vue-i18n 时，调用 locale.use()：

import { locale, en, zhCn } from '@rasmusxiong/element-plus-pro-components'

locale.use(en)   // 英文
locale.use(zhCn) // 中文（默认）

配合 vue-i18n（推荐）

将 Pro 组件文案并入 vue-i18n 的 messages，并通过 locale.i18n() 桥接：

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import { locale, en, zhCn } from '@rasmusxiong/element-plus-pro-components'

const i18n = createI18n({
  legacy: false,
  locale: 'zh-cn',
  messages: {
    'zh-cn': zhCn,
    en,
  },
})

locale.i18n((path) => {
  const { t, te } = i18n.global
  return te(path) ? t(path) : null
})

// 切换语言
i18n.global.locale.value = 'en'

Element Plus 与 Pro 组件 locale 独立

Element Plus 自身文案需通过 el-config-provider 的 :locale 单独切换，与 Pro 组件 locale 互不影响。

<script setup lang="ts">
import { computed, ref } from 'vue'
import elementEn from 'element-plus/es/locale/lang/en'
import elementZhCn from 'element-plus/es/locale/lang/zh-cn'
import { locale, en, zhCn } from '@rasmusxiong/element-plus-pro-components'

const current = ref<'zh-cn' | 'en'>('zh-cn')

const elementLocale = computed(() =>
  current.value === 'en' ? elementEn : elementZhCn,
)

const switchLocale = (key: 'zh-cn' | 'en') => {
  current.value = key
  locale.use(key === 'en' ? en : zhCn)
}
</script>

<template>
  <el-config-provider :locale="elementLocale">
    <!-- 你的应用 -->
  </el-config-provider>
</template>

语言包路径

按需引入语言包：

import zhCn from '@rasmusxiong/element-plus-pro-components/es/locale/lang/zh-cn'
import en from '@rasmusxiong/element-plus-pro-components/es/locale/lang/en'