国际化

NaiveUI Pro Components 提供了可配置的国际化方案。

基础用法

切换组件语言

切换中英文，查看搜索栏、分页和工具栏等内置文案的变化。

<script setup lang="ts">
import type { ProLocaleKey } from '@naive-ui-pro/config-provider'
import type { ProTableColumn } from '@naive-ui-pro/pro-table'
import { createProConfig } from '@naive-ui-pro/config-provider'
import { ProTable } from '@naive-ui-pro/pro-table'
import { NButton } from 'naive-ui'
import { computed, ref } from 'vue'

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

const language = ref<Language>('zh-CN')
const messages: Record<Language, Record<ProLocaleKey, string>> = {
  'zh-CN': {
    okText: '确定',
    cancelText: '取消',
    totalPrefix: '共',
    reload: '刷新',
    fullscreen: '全屏',
    exitFullscreen: '退出全屏',
    density: '密度',
    densityCompact: '紧凑',
    densityDefault: '默认',
    densityLoose: '宽松',
    columnSetting: '列设置',
    selectAll: '全选',
    reset: '重置',
    search: '搜索',
    collapse: '收起',
    expand: '展开',
    pinLeft: '固定到左侧',
    pinRight: '固定到右侧',
    unpin: '取消固定',
    inputPlaceholder: '请输入{label}',
    selectPlaceholder: '请选择{label}',
    datePlaceholder: '请选择{label}',
    numberPlaceholder: '请输入{label}',
    empty: '暂无数据',
  },
  'en-US': {
    okText: 'OK',
    cancelText: 'Cancel',
    totalPrefix: 'Total',
    reload: 'Reload',
    fullscreen: 'Fullscreen',
    exitFullscreen: 'Exit fullscreen',
    density: 'Density',
    densityCompact: 'Compact',
    densityDefault: 'Default',
    densityLoose: 'Loose',
    columnSetting: 'Column settings',
    selectAll: 'Select all',
    reset: 'Reset',
    search: 'Search',
    collapse: 'Collapse',
    expand: 'Expand',
    pinLeft: 'Pin left',
    pinRight: 'Pin right',
    unpin: 'Unpin',
    inputPlaceholder: 'Enter {label}',
    selectPlaceholder: 'Select {label}',
    datePlaceholder: 'Select {label}',
    numberPlaceholder: 'Enter {label}',
    empty: 'No data',
  },
}

const { provide } = createProConfig({ locale: key => messages[language.value][key] })
provide()

const columns = computed<ProTableColumn[]>(() => {
  const isEnglish = language.value === 'en-US'
  return [
    { title: isEnglish ? 'Name' : '姓名', key: 'name', search: true },
    {
      title: isEnglish ? 'Department' : '部门',
      key: 'department',
      search: {
        component: 'select',
        options: [
          { label: isEnglish ? 'Engineering' : '研发部', value: 'engineering' },
          { label: isEnglish ? 'Product' : '产品部', value: 'product' },
        ],
      },
    },
  ]
})

const data = [
  { id: 1, name: 'Alex', department: 'engineering' },
  { id: 2, name: 'Taylor', department: 'product' },
]

function toggleLanguage(): void {
  language.value = language.value === 'zh-CN' ? 'en-US' : 'zh-CN'
}
</script>

<template>
  <NButton style="margin-bottom: 16px;" @click="toggleLanguage">
    {{ language === 'zh-CN' ? 'Switch to English' : '切换为中文' }}
  </NButton>
  <ProTable
    :columns="columns"
    :data="data"
    :pagination="{ pageSize: 10 }"
    :row-key="row => row.id"
  />
</template>

配置方式

import { createProConfig } from 'naive-ui-pro-components'
import { i18n } from './i18n'

const { provide } = createProConfig({
  locale: key => i18n.global.t(`pro.${key}`),
})

// 在 App 的 setup 中调用
provide()

locale 的类型为 (key: ProLocaleKey) => string。未传入时，组件使用内部维护的中文默认文案。

支持的 key

字段	类型	默认值	说明
okText	string	'确定'	确认按钮文本
cancelText	string	'取消'	取消按钮文本
totalPrefix	string	'共'	分页总数前缀
reload	string	'刷新'	刷新按钮提示
fullscreen	string	'全屏'	全屏按钮提示
selectionColumn	string	'选择'	批量选择列在列设置中的名称
indexColumn	string	'序号'	序号列在列设置中的名称
reset	string	'重置'	重置按钮文本
search	string	'搜索'	搜索按钮文本
collapse	string	'收起'	收起按钮文本
expand	string	'展开'	展开按钮文本
inputPlaceholder	string	'请输入{label}'	输入框占位符模板
selectPlaceholder	string	'请选择{label}'	选择框占位符模板