国际化
组件内置文案(关闭钮、分页与面包屑的读屏文案,加载中,空状态与无匹配结果的默认提示等)走统一的 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 类型为准。