Silver Formily Element Plus5.0.1

简体中文

English

简体中文

English

Appearance

多语言配置 ​

@silver-formily/element-plus 复用 Element Plus 的语言配置。建议在应用根组件使用 ElConfigProvider 统一提供语言包，这样普通表单组件以及 FormDialog、FormDrawer 等命令式弹层都可以使用同一套文案。

配置全局语言 ​

Element Plus 默认使用英文。下面的示例把整个应用配置为简体中文：

vue
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { RouterView } from 'vue-router'
</script>

<template>
  <ElConfigProvider :locale="zhCn">
    <RouterView />
  </ElConfigProvider>
</template>

请让 ElConfigProvider 尽量靠近应用根节点，确保所有 Silver Formily 和 Element Plus 组件都位于它的作用域内。

运行时切换语言 ​

将当前语言映射为 Element Plus 语言包后传给 ElConfigProvider，即可响应式切换语言：

vue
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import en from 'element-plus/es/locale/lang/en'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { computed, ref } from 'vue'
import { RouterView } from 'vue-router'

type SupportedLanguage = 'en-US' | 'zh-CN'

const language = ref<SupportedLanguage>('zh-CN')
const elementLocale = computed(() => language.value === 'zh-CN' ? zhCn : en)

function setLanguage(nextLanguage: SupportedLanguage) {
  language.value = nextLanguage

  // 同步页面语言既有利于无障碍，也可作为命令式弹层的回退语言。
  if (typeof document !== 'undefined')
    document.documentElement.lang = nextLanguage
}
</script>

<template>
  <ElConfigProvider :locale="elementLocale">
    <button type="button" @click="setLanguage('zh-CN')">
      中文
    </button>
    <button type="button" @click="setLanguage('en-US')">
      English
    </button>
    <RouterView />
  </ElConfigProvider>
</template>

如果项目使用 vue-i18n 或其他国际化库，只需将其中的当前语言映射为对应的 Element Plus 语言包，并保持 <html lang> 同步即可。

FormDialog 与 FormDrawer ​

FormDialog 和 FormDrawer 的默认确认、取消文案遵循以下优先级：

  1. 当前调用显式传入的 okText、cancelText
  2. ElConfigProvider 中的 el.messagebox.confirm、el.messagebox.cancel
  3. 页面 <html lang> 对应的中英文回退文案

正常情况下只需配置根级 ElConfigProvider，弹层按钮就会自动跟随应用语言。如果某个业务场景需要不同文案，可以在调用时覆盖：

ts
FormDialog({
  title: '编辑用户',
  okText: '保存',
  cancelText: '返回',
}, UserForm).open()

FormDrawer({
  title: '新建用户',
  okText: '创建',
  cancelText: '放弃',
}, UserForm).open()

完整配置项参见 FormDialog 和 FormDrawer。

SelectTable ​

SelectTable 的选择数量提示和取消选择操作会自动跟随当前 Element Plus 的中文或英文语言配置。其他语言或业务定制文案可以通过 selectionText 和 clearSelectionText 覆盖：

ts
const selectTableProps = {
  selectionText: '已选中 {count} 条数据',
  clearSelectionText: '清空已选数据',
}

TIP

Element Plus 提供了更多语言包。导入路径和支持的语言列表请参考 Element Plus 国际化文档。