mirror of
https://gitee.com/layui/layui.git
synced 2025-10-07 23:24:32 +08:00
d96ad79960
Some checks failed
Issue Close Require / issue-close-require (push) Has been cancelled
* wip(i18n): laydate 国际化 * wip(i18n): colorpicker 国际化 * wip(i18n): laypage 国际化 * fix * update code * wip(i18n): 修改国际化消息对象结构 * wip(i18n): update * wip(i18n): code 国际化 * wip(i18n): dropdown 国际化 * wip(i18n): flow 国际化 * wip(i18n): form 国际化 * wip(i18n): layer 国际化 * wip(i18n): table 国际化 * wip(i18n): transfer 国际化 * wip(i18n): tree 国际化 * wip(i18n): treeTable 控制台提示统一为英文 * wip(i18n): upload 国际化 * wip(i18n): util 国际化 * wip(i18n): update code * wip(i18n): update code * wip(i18n): fix * wip(i18n): 优化 $t 代码细节 * wip(i18n): 修复 laydate lang * wip(i18n): 改进 upload i18n key * wip(i18n): 修复打包后 laydate 和 layer 异常 * wip(i18n): 移除国际化消息中的 `lay` 命名空间 * refactor(i18n): 改进国际化支持 * wip(i18n): 修复 table text.none 切换 locale 无效问题 * style(laydate): 优化逗号格式 * chore(laydate): 优化部分提示 * chore(i18n): 优化演示中部分国际化消息 * refactor: 剔除 laydate 单独版的判断逻辑 为接下来全面支持国际化做铺垫 * wip(i18n): 为 laydate 重新添加完整国际化的支持 * i18n(laydate): 优化 lang() 方法中的逻辑 * chore(util): 删除未使用的代码 * chore(i18n): 优化注释 * docs(i18n): 新增国际化文档（beta） note: 由于时间关系，本次提交仅为初版，该文档尚未完成 * wip(docs): 完善 i18n 文档 * fix(i18n): 修复 laypage 变量定义前使用 * wip(i18n): 转义翻译结果 * fix(i18n): 修复 table 排序 key 无效 * wip(i18n): 优化获取对象中指定路径值的性能 * wip(i18n): 删除 $t 可变长参数重载 * chore(i18n): 删除不必要的注释 * refactor(i18n): laydate 国际化方案迁移至 i18n.$t (#2745) * wip(i18n): 改进 laydate i18nMsg key * update code * wip(i18n): 改进 laydate 面板中的日期格式处理 * wip(i18n): 改进 util.toDateString meridiem 遵循 CLDR day periods 标准 * update code * wip(docs): 优化 i18n 文档示例 * docs(i18n): 优化正式文档 * docs(i18n): 优化部分文案 * docs(i18n): 优化示例 --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
115 lines
3.8 KiB
Markdown
115 lines
3.8 KiB
Markdown
---
|
||
title: 国际化 i18n
|
||
toc: true
|
||
---
|
||
|
||
# 国际化 <sup>2.12+</sup>
|
||
|
||
> `i18n` 是 2.12 版本新增的国际化模块，用于为 Layui 各组件实现多语言支持。
|
||
|
||
<h2 id="examples" lay-toc="{}" style="margin-bottom: 0;">完整演示</h2>
|
||
|
||
为了避免语言包配置冗长而影响示例源代码的查看，此处只演示「简体中文 / English / 繁體中文」语言环境，你可以点击该示例头部的「切换语言」选择框查看 Layui 组件在不同语言环境中的显示效果。
|
||
|
||
<div class="ws-docs-showcase"></div>
|
||
|
||
<pre class="layui-code" lay-options="{preview: 'iframe', text: {preview: 'Preview'}, style: 'height: 560px;', layout: ['preview', 'code'], tools: ['full','window']}">
|
||
<textarea>
|
||
{{- d.include("/i18n/detail/demo.md") }}
|
||
</textarea>
|
||
</pre>
|
||
|
||
<h2 id="api" lay-toc="{hot: true}">API</h2>
|
||
|
||
| API | 描述 |
|
||
| --- | --- |
|
||
| var i18n = layui.i18n | 获得 `i18n` 模块。|
|
||
| [i18n.set(options)](#set) | 设置语言环境及语言包。|
|
||
|
||
<h3 id="set" lay-toc="{level: 2}">配置方式</h3>
|
||
|
||
i18n 支持两种配置方式，你可以根据实际应用场景选择任一方式。
|
||
|
||
#### 1. 通过 `i18n.set()` 方法配置
|
||
|
||
`i18n.set(options)`
|
||
|
||
- 参数 `options` : 基础属性选项。[#详见语言包选项](#options)
|
||
|
||
```js
|
||
layui.use(function() {
|
||
var i18n = layui.i18n;
|
||
|
||
// 设置语言
|
||
i18n.set({
|
||
locale: 'zh-CN', // 当前语言环境。zh-CN 为内置简体中文语言包
|
||
messages: { // 扩展其他语言包
|
||
'en': {},
|
||
'zh-HK': {},
|
||
}
|
||
});
|
||
});
|
||
```
|
||
|
||
🔔 请注意：如果你的页面有用到 Layui 组件的自动渲染（如 table 模板配置渲染方式），因为执行顺序的问题，组件在自动渲染时可能无法读取到 `i18n.set()` 的配置信息，此时建议采用下述 `LAYUI_GLOBAL.i18n` 全局配置。
|
||
|
||
#### 2. 通过 `LAYUI_GLOBAL.i18n` 全局配置（推荐）
|
||
|
||
由于 i18n 配置与组件渲染存在执行顺序问题，为了确保 i18n 配置始终在组件渲染之前生效，更推荐采用该全局配置方式。
|
||
|
||
```html
|
||
<script>
|
||
// 全局配置应放在 layui.js 引入之前的位置
|
||
window.LAYUI_GLOBAL = {
|
||
i18n: { // 选项同 i18n.set(options)
|
||
locale: 'zh-CN', // 当前语言环境
|
||
messages: { // 扩展其他语言包
|
||
'en': {},
|
||
'zh-HK': {},
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<script src="/layui/layui.js"></script>
|
||
```
|
||
|
||
<h3 id="options" lay-toc="{level: 2}">语言包选项</h3>
|
||
|
||
i18n 默认采用简体中文（`zh-CN`）语言环境，以下为各组件消息文本对应的选项：
|
||
|
||
<div>
|
||
{{- d.include("/i18n/detail/options.md") }}
|
||
</div>
|
||
|
||
|
||
基于上述选项，还可以扩展更多语言包，如：
|
||
|
||
```js
|
||
i18n.set({
|
||
locale: 'en', // 当前语言环境
|
||
messages: { // 扩展更多语言包
|
||
'en': { // 通用英语
|
||
code: {
|
||
copy: 'Copy Code',
|
||
copied: 'Copied',
|
||
// ……
|
||
},
|
||
// ……
|
||
},
|
||
'fr': {}, // 通用法语
|
||
'zh-HK': {}, // 繁体中文
|
||
// …… // 更多语言
|
||
}
|
||
});
|
||
```
|
||
|
||
为了节省时间，也可以借助「**第三方提供并维护**的 Layui 多语言 AI 翻译工具」直接生成不同语言的消息文本，如：
|
||
|
||
| 翻译工具 | 提供者 |
|
||
| --- | --- |
|
||
| <a href="https://gitee.com/mail_osc/translate/tree/master/extend/layui-i18n-object-translate" target="_blank">https://gitee.com/mail_osc/translate/tree/master/extend/layui-i18n-object-translate</a> | <a href="https://github.com/xnx3" target="_blank">@xnx3</a> |
|
||
|
||
## 💖 心语
|
||
|
||
i18n 模块是在众多开发者强烈的需求呼声中，由 Layui 核心 Contributor [@Sight-wcg](https://github.com/Sight-wcg) 完成，该模块通过简练的设计，为 Layui 组件实现了多语言的无缝接入，并且兼容了一些原本自带简单多语言或消息配置的组件，Layui 2.x 版本也因此具备国际化能力。
|