YaoDocs

外观

导航栏

弹出框的两种方式 ​

方式一，配置 button 的事件，配置代码虽然长一点，在编辑器里通过事件面板配置。

方式二，配置 button 的 dialog 属性，代码简洁，在编辑器需要在事件面板中的配置动作(旧板)里操作。

json
{
  "title": "form",
  "body": [
    {
      "initApi": "/api/v1/system/meta/model/source/92",
      "body": [
        {
          "name": "source",
          "type": "editor",
          "language": "json",
          "label": "JSON",
          "value": "{}",
          "id": "u:7e05b00528eb"
        }
      ],
      "id": "u:dbbaeb34f6e8",
      "actions": [
        {
          "type": "button",
          "label": "弹出框一",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "dialog",
                  "dialog": {
                    "showErrorMsg": true,
                    "showLoading": true,
                    "className": "app-popover",
                    "id": "u:b39aecfdb5fd",
                    "type": "dialog",
                    "title": "弹框标题",
                    "body": [
                      {
                        "type": "service",
                        "api": "/api/v1/system/meta/model/source/92",
                        "body": [
                          {
                            "language": "json",
                            "label": "JSON",
                            "value": "{}",
                            "id": "u:18805e926840",
                            "name": "source",
                            "type": "editor"
                          }
                        ],
                        "id": "u:297a88684e22"
                      }
                    ],
                    "showCloseButton": true
                  }
                }
              ]
            }
          },
          "id": "u:40c005c0a0f1",
          "editorState": "default"
        },
        {
          "type": "button",
          "label": "弹出框二",
          "level": "info",
          "actionType": "dialog",
          "dialog": {
            "title": "",
            "body": {
              "type": "service",
              "api": "/api/v1/system/meta/model/source/92",
              "body": [
                {
                  "name": "source",
                  "type": "editor",
                  "language": "json",
                  "label": "JSON",
                  "value": "{}"
                }
              ]
            }
          }
        }
      ],
      "type": "form"
    }
  ],
  "id": "u:34e1a6dcf184",
  "type": "page"
}

技巧： 1 弹出框全屏显示编辑器，在弹出框中如果是使用 form 作为组件，无法全屏显示控件。此时可以使用 service 组件作为数据容器。 2 弹出框中 Form 隐藏 label,使用配置项labelClassName=hidden隐藏标签。

json
{
  "type": "form",
  "api": "post:/api/v1/system/meta/model/import",
  "body": [
    {
      "labelClassName": "hidden",
      "language": "json",
      "value": "{}",
      "id": "u:18805e926840",
      "name": "source",
      "type": "editor"
    }
  ]
}