baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.4k stars 2.52k forks source link

弹窗,checkbox开关控制【确定】按钮禁用启用,怎么实现? #11110

Open wanquantong opened 3 weeks ago

wanquantong commented 3 weeks ago

实现场景:

弹窗,checkbox开关控制【确定】按钮禁用启用,怎么实现? checkbox-事件-值变化-组件可用性的做法。
或者按钮的disabledOn做法。(表达式的变量里没有checkbox)

存在的问题:

请简单描述你现在遇到的不符合预期的问题...

当前方案:

请粘贴你当前方案的完整 amis schema 代码...

{
  "type": "page",
  "id": "u:c4ae3d7afa68",
  "asideResizor": false,
  "pullRefresh": {
    "disabled": true
  },
  "body": [],
  "regions": [
    "body"
  ],
  "definitions": {
    "modal-ref-1": {
      "type": "dialog",
      "body": [
        {
          "type": "tpl",
          "tpl": "弹窗内容",
          "id": "u:2ec9818540e9"
        }
      ],
      "title": "弹窗",
      "id": "u:fb06667eeb94",
      "actions": [
        {
          "type": "checkbox",
          "option": "二次确认",
          "name": "checkbox",
          "id": "u:d87681969ba7",
          "onEvent": {
            "change": {
              "weight": 0,
              "actions": [
                {
                  "componentId": "u:f8fdde184f87",
                  "ignoreError": false,
                  "actionType": "disabled"
                }
              ]
            }
          }
        },
        {
          "type": "button",
          "actionType": "confirm",
          "label": "确定",
          "primary": true,
          "id": "u:f8fdde184f87",
          "disabledOn": ""
        }
      ],
      "showCloseButton": true,
      "closeOnOutside": false,
      "closeOnEsc": false,
      "showErrorMsg": true,
      "showLoading": true,
      "draggable": false
    }
  },
  "data": {},
  "onEvent": {
    "init": {
      "weight": 0,
      "actions": [
        {
          "ignoreError": false,
          "actionType": "dialog",
          "dialog": {
            "$ref": "modal-ref-1"
          }
        }
      ]
    }
  }
}
lhtuling commented 3 weeks ago

好像是有点小bug 换个思路就搞定了用显示隐藏就行了

Amis低代码前端框架交流群【QQ 1群】:717791727 Amis低代码前端框架交流群【QQ 2群】:721182449

{
  "type": "page",
  "body": [],
  "id": "u:c4ae3d7afa68",
  "asideResizor": false,
  "pullRefresh": {
    "disabled": true
  },
  "regions": [
    "body"
  ],
  "definitions": {
    "modal-ref-1": {
      "type": "dialog",
      "body": [
        {
          "type": "tpl",
          "tpl": "弹窗内容",
          "id": "u:2ec9818540e9"
        },
        {
          "type": "checkbox",
          "option": "二次确认",
          "name": "checkbox",
          "id": "u:d87681969ba7",
          "onEvent": {
            "change": {
              "weight": 0,
              "actions": [
                {
                  "componentId": "u:f8fdde184f87",
                  "ignoreError": false,
                  "actionType": "disabled"
                }
              ]
            }
          }
        },
        {
          "type": "button",
          "actionType": "confirm",
          "label": "确定-1",
          "primary": true,
          "id": "u:f8fdde184f87",
          "disabled": true,
          "visibleOn": "${!checkbox||checkbox===fase}"
        },
        {
          "type": "button",
          "actionType": "confirm",
          "label": "确定-2",
          "primary": true,
          "id": "u:15784ff0f104",
          "disabled": false,
          "hidden": false,
          "visibleOn": "${checkbox&&checkbox===true}"
        }
      ],
      "title": "弹窗",
      "id": "u:fb06667eeb94",
      "showCloseButton": true,
      "closeOnOutside": false,
      "closeOnEsc": false,
      "showErrorMsg": true,
      "showLoading": true,
      "draggable": false,
      "actions": []
    }
  },
  "data": {},
  "onEvent": {
    "init": {
      "weight": 0,
      "actions": [
        {
          "ignoreError": false,
          "actionType": "dialog",
          "dialog": {
            "$ref": "modal-ref-1"
          }
        }
      ]
    }
  },
  "dsType": "api",
  "labelAlign": "left"
}