Skip to content

国际化 ​

组件内置文案(关闭钮、分页与面包屑的读屏文案,加载中,空状态与无匹配结果的默认提示等)走统一的 locale 注册表。 默认带简体中文和英文。

业务文案不在这里 —— 那是你的事,通过插槽传进来。

全局切换 ​

ts
import { setLocale } from '@ptengine/ui';

setLocale('en');

按区域切换 ​

元素上的 lang 优先于全局设置,一页多语言时用它:

html
<div lang="en">
  <pt-modal>…</pt-modal>
  <!-- 这里的关闭钮读屏文案是 Close -->
</div>

这与设计变量里字体栈按 :lang() 切换的行为对齐,两者不会打架。

注册新语言 ​

ts
import { registerLocale } from '@ptengine/ui';

registerLocale('ja', {
  'modal.close': '閉じる',
  'spinner.loading': '読み込み中',
  'select.placeholder': '選択してください'
});

只给了部分 key 时,缺的自动落回英文 —— 少一句话不该让整个 locale 不可用。

可用的 key ​

key用在哪
modal.close弹窗关闭按钮的读屏文案
spinner.loading加载中状态的读屏文案
select.placeholder下拉选择器未选中时的占位
empty.title空状态的默认标题
input.clear清空输入的读屏文案
field.required必填标记的读屏文案
field.invalid使用方标记 invalid 时,表单校验(customError)的默认提示
combobox.empty可搜索下拉框没有匹配项时的默认提示
command.empty命令面板没有匹配项时的默认提示
command.label命令面板输入框与列表的默认无障碍名称
pagination.label分页导航地标的默认读屏名称
pagination.previous分页「上一页」按钮的读屏文案
pagination.next分页「下一页」按钮的读屏文案
pagination.more分页省略号的读屏文案
pagination.page分页页码按钮的读屏文案,{page} 为页码
breadcrumb.more面包屑折叠项的读屏文案
breadcrumb.label面包屑导航地标的默认无障碍名称
toast.close轻提示关闭按钮的读屏文案
toast.label轻提示通知区(pt-toaster)的读屏名称,后面会接上快捷键 Alt+T
slider.minimum双滑块(范围)里较小一端滑块的读屏文案
slider.maximum双滑块(范围)里较大一端滑块的读屏文案
slider.thumb三个及以上滑块时每个滑块的读屏文案,{index} 为从 1 开始的序号,{total} 为滑块总数
scrollArea.label滚动区域(pt-scroll-area)视口在没有 label 时的默认读屏名称

另有一组 key 已在注册表里预留、给后续批次的组件用(轮播、侧边栏、日历、验证码输入、附件等),现在注册了也不会被读到: carousel.previous、carousel.next、carousel.slide、sidebar.toggle、scroller.toStart、scroller.toEnd、promptPicker.back、calendar.previousMonth、calendar.nextMonth、calendar.today、otp.incomplete、resizable.handle、attachment.remove、attachment.uploading、attachment.processing、attachment.error。完整清单以 LocaleMessages 类型为准。

Apache-2.0 协议开源