国际化

SeeYouUI 内置了一套轻量级的国际化方案，支持中英文以及其他任意语言的切换。
它完全兼容 uni-app 所有平台（H5、App、小程序），无外部依赖，且与组件库深度集成 —— 切换语言后所有组件的文案自动更新。

快速开始

零配置使用

如果你只需要中文或英文，不需要任何配置，直接使用即可。

组件会跟随系统语言自动切换：

系统语言为中文时，组件显示中文文案
系统语言为其他时，组件默认显示英文文案

vue

<template>
  <!-- 按钮文案自动跟随系统语言 -->
  <see-calendar />
  <see-picker />
  <see-pagination />
</template>

指定默认语言

在你的入口文件（main.js 或 main.ts）中，创建 i18n 实例并在 app.use() 时传入：

// main.js
import { createI18n } from 'see-u-ui'
import SeeYouUI from 'see-u-ui'

// 创建 i18n 实例
const i18n = createI18n({
  locale: 'zh-CN',          // 默认语言
  fallbackLocale: 'zh-CN',  // 找不到 key 时的回退语言
})

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  // 传入 i18n 实例
  app.use(SeeYouUI, { i18n })
  return { app }
}
// #endif

在组件中动态切换语言

vue

<template>
  <view>
    <see-calendar />
    <button @click="switchToEn">English</button>
    <button @click="switchToZh">中文</button>
  </view>
</template>

<script setup>
import { useI18n } from 'see-u-ui'

const { setLocale } = useI18n()

const switchToEn = () => setLocale('en')
const switchToZh = () => setLocale('zh-CN')
</script>

自定义语言包

你可以覆盖内置文案，或添加全新的语言。

import { createI18n } from 'see-u-ui'

const i18n = createI18n({
  locale: 'ja',             // 使用日语
  fallbackLocale: 'zh-CN',  // 找不到日语 key 时回退到中文
  messages: {
    // 完全自定义中文文案
    'zh-CN': {
      cancel: '返回',
      confirm: '好的',
      'calendar.week.sunday': '周日',
      // ... 覆盖其他 key
    },
    // 添加新语言
    'ja': {
      cancel: 'キャンセル',
      confirm: '確認',
      'calendar.week.sunday': '日',
      'calendar.week.monday': '月',
      // ...
    },
  },
})

export function createApp() {
  const app = createSSRApp(App)
  app.use(SeeYouUI, { i18n })
  return { app }
}

在业务代码中使用翻译

useI18n() 返回的 t() 函数也可以用来翻译你自己的文案：

vue

<template>
  <view>
    <h1>{{ t('greeting', { name: userName }) }}</h1>
    <button @click="toggleLang">切换语言</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useI18n } from 'see-u-ui'

const { t, locale, setLocale } = useI18n()
const userName = ref('宝宝')

const toggleLang = () => {
  locale.value = locale.value === 'zh-CN' ? 'en' : 'zh-CN'
}
</script>

你需要在 createI18n 中定义自己的翻译 key：

const i18n = createI18n({
  messages: {
    'zh-CN': {
      greeting: '你好，{name}！',
      // ... 其他组件 key 会与内置语言包自动合并
    },
    'en': {
      greeting: 'Hello, {name}!',
    },
  },
})

使用 `<see-config>` 配置

如果你使用 <see-config> 组件作为根节点，也可以在上面设置语言：

vue

<!-- App.vue -->
<template>
  <see-config locale="en">
    <!-- 所有子组件的语言都变为英文 -->
    <router-view />
  </see-config>
</template>

内置语言 Key 列表

以下是 SeeYouUI 组件内置的所有翻译 key，你可以覆盖其中任意一个：

通用

Key	中文	英文
`cancel`	取消	Cancel
`confirm`	确定	OK
`close`	关闭	Close
`loading`	加载中...	Loading...
`noData`	暂无数据	No Data
`loadMore`	加载更多	Load More
`pullRefresh`	下拉刷新	Pull to Refresh
`retry`	重试	Retry
`search`	搜索	Search
`reset`	重置	Reset

Calendar 日历

Key	中文	英文
`calendar.week.sunday`	日	Su
`calendar.week.monday`	一	Mo
`calendar.week.tuesday`	二	Tu
`calendar.week.wednesday`	三	We
`calendar.week.thursday`	四	Th
`calendar.week.friday`	五	Fr
`calendar.week.saturday`	六	Sa
`calendar.today`	今天	Today
`calendar.month.january`	1月	Jan
`calendar.month.february`	2月	Feb
`calendar.month.march`	3月	Mar
`calendar.month.april`	4月	Apr
`calendar.month.may`	5月	May
`calendar.month.june`	6月	Jun
`calendar.month.july`	7月	Jul
`calendar.month.august`	8月	Aug
`calendar.month.september`	9月	Sep
`calendar.month.october`	10月	Oct
`calendar.month.november`	11月	Nov
`calendar.month.december`	12月	Dec

Picker / DatetimePicker 选择器

Key	中文	英文
`picker.cancel`	取消	Cancel
`picker.confirm`	确定	Confirm
`picker.year`	年	Year
`picker.month`	月	Month
`picker.day`	日	Day
`picker.hour`	时	Hour
`picker.minute`	分	Min
`picker.second`	秒	Sec
`picker.startDate`	开始日期	Start
`picker.endDate`	结束日期	End

Upload 上传

Key	中文	英文
`upload.selectFile`	选择文件	Select File
`upload.uploading`	上传中...	Uploading...
`upload.success`	上传成功	Uploaded
`upload.fail`	上传失败	Upload Failed
`upload.exceedSize`	文件大小超出限制	File size exceeded
`upload.exceedCount`	文件数量超出限制	File count exceeded

Pagination 分页器

Key	中文	英文
`pagination.total`	共 {total} 条	{total} items
`pagination.prev`	上一页	Prev
`pagination.next`	下一页	Next

Table 表格

Key	中文	英文
`table.empty`	暂无数据	No Data
`table.sortAsc`	升序	Ascending
`table.sortDesc`	降序	Descending

Empty 空状态

Key	中文	英文
`empty.default`	暂无数据	No Data
`empty.network`	网络不给力	Network Error
`empty.search`	没有找到相关内容	No Results Found

Key	中文	英文
`modal.cancel`	取消	Cancel
`modal.confirm`	确定	Confirm

ActionSheet 操作菜单

Key	中文	英文
`actionSheet.cancel`	取消	Cancel

Search 搜索

Key	中文	英文
`search.placeholder`	请输入搜索内容	Please enter keywords
`search.cancel`	取消	Cancel

CountDown 倒计时

Key	中文	英文
`countdown.day`	天	d
`countdown.hour`	时	h
`countdown.minute`	分	m
`countdown.second`	秒	s

Keyboard 键盘

Key	中文	英文
`keyboard.done`	完成	Done

Cascader 级联选择器

Key	中文	英文
`cascader.placeholder`	请选择	Please select

NoticeBar 滚动通知

Key	中文	英文
`noticeBar.close`	关闭	Close
`noticeBar.more`	详情	Details

SwipeAction 滑动操作

Key	中文	英文
`swipeAction.confirm`	确认删除？	Confirm delete?

NoNetwork 无网络

Key	中文	英文
`noNetwork.title`	网络不给力	Network Error
`noNetwork.retry`	点击重试	Tap to retry

LoadingPage 加载页

Key	中文	英文
`loadingPage.loading`	加载中...	Loading...

关于 vue-i18n

SeeYouUI 的内置 i18n 是完全独立的，与 vue-i18n 无关。

如果你在项目中使用 vue-i18n，两者可以共存互不干扰，但你需要自行处理两个 i18n 实例之间的语言同步（如果有这方面的需求）。

推荐的做法是：直接使用 SeeYouUI 内置的 i18n 来管理组件库的文案，项目自身的业务文案你可以选择使用 SeeYouUI 的 i18n（useI18n）或 vue-i18n，二者不冲突。

API 参考

详见 useI18n API 文档。

国际化 ​

快速开始 ​

零配置使用 ​

指定默认语言 ​

在组件中动态切换语言 ​

自定义语言包 ​

在业务代码中使用翻译 ​

使用 <see-config> 配置 ​

内置语言 Key 列表 ​

通用 ​

Calendar 日历 ​

Picker / DatetimePicker 选择器 ​

Upload 上传 ​

Pagination 分页器 ​

Table 表格 ​

Empty 空状态 ​

Modal 模态框 ​

ActionSheet 操作菜单 ​

Search 搜索 ​

CountDown 倒计时 ​

Keyboard 键盘 ​

Cascader 级联选择器 ​

NoticeBar 滚动通知 ​

SwipeAction 滑动操作 ​

NoNetwork 无网络 ​

LoadingPage 加载页 ​

关于 vue-i18n ​

API 参考 ​

国际化