通过amisLib.registerFilter自定义过滤器,发现部分组件不生效

jq6vz3qz  于 22天前  发布在  其他
关注(0)|答案(1)|浏览(18)
描述问题:

我通过自定义过滤器来实现国际化切换,发现部分组件无法处理这个过滤器

截图或视频:
如何复现(请务必完整填写下面内容):
  1. 你是如何使用 amis 的?
    sdk
  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在
    amis版本为2.3.2
  3. 粘贴有问题的完整代码:
<!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>

8ftvxx2r

8ftvxx2r1#

👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

相关问题