mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:39:53 +08:00
3.7 KiB
3.7 KiB
title |
---|
多语言 |
amis 中对多语言的支持有两方面:
- amis 内部组件的多语言,比如日期组件中的日期
- JSON 配置中的多语言,比如配置中的 label 值
amis 内部组件多语言
分为 JS SDK 和 React 两种用法。
JS SDK
从 1.1.0 版本开始已经自带英文翻译,所以只需要在 props 里设置 locale 即可。
let amisScoped = amis.embed(
'#root',
{
type: 'page',
title: '表单页面',
body: {
type: 'form',
mode: 'horizontal',
api: '/saveForm',
body: [
{
label: 'Name',
type: 'input-text',
name: 'name'
}
]
}
},
{
locale: 'en-US'
}
);
如果是其它语言,比如目前德语,需要单独引入文件
<script src="sdk.js"></script>
<script src="locale/de-DE.js"></script>
<script type="text/javascript">
(function () {
let amis = amisRequire('amis/embed');
// 通过替换下面这个配置来生成不同页面
let amisJSON = {
type: 'page',
body: {
type: 'form',
mode: 'horizontal',
api: '/saveForm',
body: [
{
label: 'Name',
type: 'input-text',
name: 'name'
},
{
label: 'Email',
type: 'input-email',
name: 'email'
}
]
}
};
let amisScoped = amis.embed('#root', amisJSON, {
locale: 'de-DE'
});
})();
</script>
React
React 版本中没有内置英文翻译,需要自己 import,使用如下方法:
import 'amis/lib/locale/en-US';
在渲染 amis 组件的时候设置 locale 为 en-US
{
renderAmis(
{
type: 'page',
title: '简单页面',
body: '内容'
},
{
locale: 'en-US'
}
);
}
全局文本替换
1.5.0 及以上版本
amis 渲染的 env 参数可以配置全局文本替换,能基于它实现多语言替换功能
// sdk 中的写法
let amisScoped = amis.embed(
'#root',
amisJSON,
{
// 这是 props
},
{
replaceText: {
AMIS_HOST: 'https://baidu.gitee.io/amis'
}
}
);
比如下面的例子会对 AMIS_HOST
进行替换
{
"type": "tpl",
"tpl": "AMIS_HOST"
}
这个配置会对配置中的绝大部分字段进行替换,除了 type, name, mode, target, reload
这几个有特殊功能的字段。
可以通过配置 replaceTextIgnoreKeys
属性来进行修改,让其它字段也避免被替换。
JSON 配置中设置多语言
在 JSON 配置中,也可以设置不同语言下的不同展现,比如前面设置了 locale
为 en-US
,这时在任意 JSON 配置中都能使用 en-US
对象来覆盖这个语言下的效果,用于实现简单的替换效果。
{
"type": "form",
"body": [{
"type": "input-text",
"name": "name",
"label": "姓名:",
"en-US": {
"label": "username: "
}
}]
}
请点击上方的切换语言下拉框切换到英文,就能看到 label
属性被替换了,除了 label
以外,还可以覆盖其他任意属性,比如将 type 换成其他。
扩展内置组件的语言
如果想扩展其他语言,首先参考 https://github.com/baidu/amis/blob/master/src/locale/en-US.ts
文件,然后参考后面的示例注册新语言,未翻译的文字都将使用中文。
JS SDK 扩展方法
let amisLib = amisRequire('amis');
amisLib.registerLocale('jp', {
'Form.submit': '送信'
});
React 扩展方法
import {registerLocale} from 'amis';
registerLocale('jp', {
'Form.submit': '送信'
});