描述问题:
我通过自定义过滤器来实现国际化切换,发现部分组件无法处理这个过滤器
截图或视频:
如何复现(请务必完整填写下面内容):
- 你是如何使用 amis 的?
sdk
- amis 版本是什么?请先在最新 beta 版本测试问题是否存在
amis版本为2.3.2 - 粘贴有问题的完整代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>amis demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- <link rel="stylesheet" href="./sdk/sdk.css" />
<link rel="stylesheet" href="./sdk/helper.css" />
<link rel="stylesheet" href="./sdk/iconfont.css" /> -->
<link rel="stylesheet" href="./helper.css" />
<link rel="stylesheet" href="./iconfont.css" />
<link rel="stylesheet" href="./sdk.css" />
<style>
html,
body,
.app-wrapper {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script src="./sdk.js"></script>
<script type="module">
let amisFn = () => {
let amis = amisRequire("amis/embed");
let amisLib = amisRequire("amis");
let lang = localStorage.getItem("amis-lang");
// console.log(lang);
amisLib.registerFilter("i18n", (key, data) => {
let label = data[key];
if(label){
return label[lang] || label["default"] || label;
}
return key;
})
let amisJSON = {
type: "page",
data: {
i18nConfig: {
"表单页面": {
"default": "defaultPage",
"en": "enPage",
"zh_hk": "hkPage",
"zh": "zhPage"
},
"addNew": {
"default": "default",
"en": "Add channel",
"zh_hk": "添加HK",
"zh": "添加ZH"
},
"账号:": {
"default": "账号:",
"en": "Account",
"zh_hk": "",
"zh": "账号:"
},
"密码:": {
"default": "密码:",
"en": "Password",
"zh_hk": "",
"zh": "密码:"
},
"备注:": {
"default": "备注:",
"en": "Remark",
"zh_hk": "",
"zh": "备注:"
},
"保存": {
"default": "保存",
"en": "Save",
"zh_hk": "",
"zh": "保存"
},
"取消": {
"default": "取消",
"en": "Cancel",
"zh_hk": "",
"zh": "取消"
},
}
},
title: "${i18n('表单页面',i18nConfig)}",
body: {
type: "form",
wrapWithPanel: false,
body: [
{
type: "action",
label: "${i18n('addNew', i18nConfig)}",
icon: "fa fa-plus",
actionType: "dialog",
dialog: {
type: "dialog",
title: "${i18n('addNew', i18nConfig)}",
data: {},
body: [
{
type: "form",
body: [
{
type: "input-text",
label: "${i18n('账号:', i18nConfig)}",
clearable: true,
name: "userCode",
required: true,
mode: "horizontal",
horizontal: {
leftFixed: "",
left: 3,
right: 9,
},
size: "lg",
inputClassName: "",
className: "m-r-lg",
},
{
type: "input-password",
label: "${i18n('密码:', i18nConfig)}",
clearable: true,
name: "passWord",
required: true,
mode: "horizontal",
horizontal: {
leftFixed: "",
left: 3,
right: 9,
},
size: "lg",
className: "m-r-lg",
},
{
type: "textarea",
label: "${i18n('备注:', i18nConfig)}",
clearable: true,
name: "remark",
required: false,
mode: "horizontal",
horizontal: {
leftFixed: "",
left: 3,
right: 9,
},
size: "lg",
minRows: 3,
maxRows: 20,
showCounter: true,
className: "m-r-lg",
},
],
},
],
actions: [
{
type: "submit",
label: "${i18n('保存', i18nConfig)}",
reload: "cat",
level: "primary",
actionType: "ajax",
api: {
url: "/api/cubeEntrance/insertChannel",
method: "post",
},
},
{
type: "button",
label: "${i18n('取消', i18nConfig)}",
className: "text-muted",
actionType: "cancel",
},
],
closeOnEsc: false,
closeOnOutside: false,
showCloseButton: true,
size: "",
},
level: "primary",
},
],
},
};
let amisScoped = amis.embed(
"#root",
amisJSON,
{
locale: lang || 'zh',
},
{}
);
};
amisFn();
window.addEventListener("storage", (e) => {
// console.log('e', e)
if(e.key == 'amis-lang') {
amisFn();
}
})
</script>
</body>
</html>
1条答案
按热度按时间8ftvxx2r1#
👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.