amis/docs/zh-CN/components/drawer.md

24 KiB
Executable File
Raw Blame History

title description type group menuName icon order
Drawer 抽屉 0 ⚙ 组件 Drawer 抽屉 43

基本用法

{
    "label": "弹出",
    "type": "button",
    "actionType": "drawer",
    "drawer": {
      "title": "抽屉标题",
      "body": {
            "label": "第二层",
            "type": "button",
            "actionType": "drawer",
            "drawer": {
                "title": "抽屉标题",
                "body": {
                    "label": "第三层",
                    "type": "button",
                    "actionType": "drawer",
                    "drawer": {
                        "title": "抽屉标题",
                        "body": "这是第三层抽屉"
                    }
                }
            }
      }
    }
}

抽屉尺寸

{
    "type": "button-toolbar",
    "className": "block m-t",
    "buttons": [
        {
            "type": "button",
            "label": "极小框",
            "actionType": "drawer",
            "drawer": {
                "position": "right",
                "size": "xs",
                "title": "提示",
                "body": "这是个简单的弹框"
            }
        },
        {
            "type": "button",
            "label": "小框",
            "actionType": "drawer",
            "drawer": {
                "position": "right",
                "size": "sm",
                "title": "提示",
                "body": "这是个简单的弹框"
            }
        },
        {
            "type": "button",
            "label": "中框",
            "actionType": "drawer",
            "drawer": {
                "position": "right",
                "size": "md",
                "title": "提示",
                "body": "这是个简单的弹框"
            }
        },
        {
            "type": "button",
            "label": "大框",
            "actionType": "drawer",
            "drawer": {
                "position": "right",
                "size": "lg",
                "title": "提示",
                "body": "这是个简单的弹框"
            }
        },
        {
            "type": "button",
            "label": "超大框",
            "actionType": "drawer",
            "drawer": {
                "size": "xl",
                "position": "right",
                "title": "提示",
                "body": "这是个简单的弹框"
            }
        },
    ]
}

自定义抽屉尺寸

值如果是数字类型单位默认使用px, 如果是字符串类型可以使用自定义 css 宽度变量,如:%vwpx

{
    "type": "button-toolbar",
    "className": "block m-t",
    "buttons": [
        {
            "type": "button",
            "label": "自定义宽度",
            "actionType": "drawer",
            "drawer": {
                "position": "right",
                "width": 300,
                "title": "提示",
                "body": "这是个自定义300px宽度的弹框"
            }
        },
        {
            "type": "button",
            "label": "自定义高度",
            "actionType": "drawer",
            "drawer": {
                "position": "bottom",
                "height": 300,
                "title": "提示",
                "body": "这是个自定义300px高度的弹框"
            }
        },
    ]
}

指定弹出方向

{
    "type": "button-toolbar",
    "className": "block m-t",
    "buttons": [
        {
            "type": "button",
            "label": "左侧弹出",
            "actionType": "drawer",
            "drawer": {
                "position": "left",
                "title": "提示",
                "body": "这是个简单的弹框"
            }
        },
        {
            "type": "button",
            "label": "右侧弹出",
            "actionType": "drawer",
            "drawer": {
                "position": "right",
                "title": "提示",
                "body": "这是个简单的弹框"
            }
        },
        {
            "type": "button",
            "label": "顶部弹出",
            "actionType": "drawer",
            "drawer": {
                "position": "top",
                "title": "提示",
                "body": "这是个简单的弹框"
            }
        },
        {
            "type": "button",
            "label": "底部弹出",
            "actionType": "drawer",
            "drawer": {
                "position": "bottom",
                "title": "提示",
                "body": "这是个简单的弹框"
            }
        }
    ]
}

可拖拽抽屉大小

配置"resizable": true,可以拖拽调整drawer大小

{
    "type": "button",
    "label": "可拖拽调整大小",
    "actionType": "drawer",
    "drawer": {
        "position": "right",
        "resizable": true,
        "title": "提示",
        "body": "这是个简单的弹框"
    }
}

是否展示关闭按钮

配置"showCloseButton": false,可以隐藏关闭按钮

{
    "type": "button",
    "label": "无关闭按钮",
    "actionType": "drawer",
    "drawer": {
        "position": "right",
        "title": "提示",
        "body": "这是个简单的弹框",
        "showCloseButton": false
    }
}

不显示蒙层

{
    "type": "button",
    "label": "不显示蒙层",
    "actionType": "drawer",
    "drawer": {
        "position": "right",
        "overlay": false,
        "title": "提示",
        "body": "这是个简单的弹框"
    }
}

点击抽屉外自动关闭

配置"closeOnOutside":true

显示蒙层

{
    "type": "button",
    "label": "点击抽屉外自动关闭",
    "actionType": "drawer",
    "drawer": {
        "position": "right",
        "closeOnOutside": true,
        "title": "提示",
        "body": "这是个简单的弹框"
    }
}

不显示蒙层

{
    "type": "button",
    "label": "点击抽屉外自动关闭",
    "actionType": "drawer",
    "drawer": {
        "position": "right",
        "overlay": false,
        "closeOnOutside": true,
        "title": "提示",
        "body": "这是个简单的弹框"
    }
}

多级弹框

{
    "type": "button",
    "label": "多级弹框",
    "actionType": "drawer",
    "drawer": {
        "title": "提示",
        "body": "这是个简单的弹框",
        "actions": [
            {
                "type": "button",
                "actionType": "confirm",
                "label": "确认",
                "primary": true
            },
            {
                "type": "button",
                "actionType": "drawer",
                "label": "再弹一个",
                "drawer": {
                    "title": "弹框中的弹框",
                    "body": "如果你想,可以无限弹下去",
                    "actions": [
                        {
                            "type": "button",
                            "actionType": "drawer",
                            "label": "来吧",
                            "level": "info",
                            "drawer": {
                                "title": "弹框中的弹框",
                                "body": "如果你想,可以无限弹下去",
                                "actions": [
                                    {
                                        "type": "button",
                                        "actionType": "confirm",
                                        "label": "不弹了",
                                        "primary": true
                                    }
                                ]
                            }
                        }
                    ]
                }
            }
        ]
    }
}

动作后关闭弹框

在弹框中配置行为按钮,可以在按钮上配置"close": true,在行为完成后,关闭当前弹框。

{
    "type": "button",
    "label": "弹个框",
    "actionType": "drawer",
    "drawer": {
        "title": "弹框",
        "body": [
          {
            "type": "button",
            "label": "默认的 ajax 请求",
            "actionType": "ajax",
            "api": "/api/mock2/form/saveForm?waitSeconds=1"
          },
          {
            "type": "button",
            "label": "ajax 请求成功后关闭弹框",
            "actionType": "ajax",
            "api": "/api/mock2/form/saveForm?waitSeconds=1",
            "close": true
          }
        ]
    }
}

以上例子是关闭当前弹窗,如果希望关闭上层弹窗,则需要给目标弹窗设置 name 属性,然后配置按钮 close 属性为目标 name 属性如:

{
    "type": "button",
    "label": "多级弹框",
    "actionType": "drawer",
    "drawer": {
        "title": "提示",
        "body": "这是个简单的弹框",
        "name": "drawer_1",
        "actions": [
            {
                "type": "button",
                "actionType": "confirm",
                "label": "确认",
                "primary": true
            },
            {
                "type": "button",
                "actionType": "drawer",
                "label": "再弹一个",
                "drawer": {
                    "title": "弹框中的弹框",
                    "body": "关闭当前弹窗的时候把外层的弹窗一起关了",
                    "actions": [
                        {
                            "type": "button",
                            "label": "关闭所有",
                            "level": "info",
                            "close": "drawer_1"
                        }
                    ]
                }
            }
        ]
    }
}

配置弹窗的按钮

默认弹窗会自动生成两个按钮,一个取消,一个确认。如果通过 actions 来自定义配置,则以配置的为准。

{
    "type": "button-toolbar",
    "buttons": [
        {
            "type": "button",
            "label": "无按钮",
            "actionType": "dialog",
            "dialog": {
                "title": "提示",
                "actions": [],
                "body": "无按钮的弹框"
            }
        },
        {
            "type": "button",
            "label": "只有一个确认按钮",
            "actionType": "dialog",
            "dialog": {
                "title": "提示",
                "actions": [{
                  "type": "button",
                  "actionType": "confirm",
                  "label": "OK",
                  "primary": true
                }],
                "body": "只有一个 OK 的弹框"
            }
        }
    ]
}

属性表

属性名 类型 默认值 说明
type string "drawer" 指定为 Drawer 渲染器
title SchemaNode 弹出层标题
body SchemaNode 往 Drawer 内容区加内容
size string 指定 Drawer 大小,支持: xssmmdlgxl
position string 指定 Drawer 方向,支持: leftrighttopbottom
className string `` Drawer 最外层容器的样式类名
headerClassName string Drawer 头部 区域的样式类名
bodyClassName string modal-body Drawer body 区域的样式类名
footerClassName string Drawer 页脚 区域的样式类名
showCloseButton boolean true 是否展示关闭按钮,当值为 false 时,默认开启 closeOnOutside
closeOnEsc boolean false 是否支持按 Esc 关闭 Drawer
closeOnOutside boolean false 点击内容区外是否关闭 Drawer
overlay boolean true 是否显示蒙层
resizable boolean false 是否可通过拖拽改变 Drawer 大小
width string | number 500px 容器的宽度,在 position 为 leftright 时生效
height string | number 500px 容器的高度,在 position 为 topbottom 时生效
actions Array<Action> 【确认】和【取消】 可以不设置,默认只有两个按钮。
data object 支持 数据映射,如果不设定将默认将触发按钮的上下文中继承数据。

事件表

当前组件会对外派发以下事件,可以通过onEvent来监听这些事件,并通过actions来配置执行的动作,在actions中可以通过${事件参数名}${event.data.[事件参数名]}来获取事件产生的数据,详细请查看事件动作

事件名称 事件参数 说明
confirm event.data: object 抽屉数据
[name]: any 当前数据域中指定字段的值
点击确认提交时触发
cancel event.data: object 抽屉数据
[name]: any 当前数据域中指定字段的值
点击取消时触发

confirm

[
  {
    "label": "点击弹框",
    "type": "button",
    "onEvent": {
      "click": {
        "actions": [
          {
            "actionType": "drawer",
            "drawer": {
              "title": "弹框标题",
              "body": "这是一个弹框",
              "onEvent": {
                "confirm": {
                    "actions": [
                    {
                        "actionType": "toast",
                        "args": {
                            "msg": "confirm"
                        }
                    }
                    ]
                }
              }
            }
          }
        ]
      }
    }
  }
]

cancel

[
  {
    "label": "点击弹框",
    "type": "button",
    "onEvent": {
      "click": {
        "actions": [
          {
            "actionType": "drawer",
            "drawer": {
              "title": "弹框标题",
              "body": "这是一个弹框",
              "onEvent": {
                "cancel": {
                    "actions": [
                    {
                        "actionType": "toast",
                        "args": {
                            "msg": "cancel"
                        }
                    }
                    ]
                }
              }
            }
          }
        ]
      }
    }
  }
]

动作表

当前组件对外暴露以下特性动作,其他组件可以通过指定actionType: 动作名称componentId: 该组件id来触发这些动作,动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数,详细请查看事件动作

动作名称 动作配置 说明
confirm - 确认(提交)
cancel - 取消(关闭)
setValue value: object 更新的数据 更新数据

confirm 动作

{
    "type": "button",
    "label": "弹个表单",
    "actionType": "drawer",
    "drawer": {
        "title": "在弹框中的表单",
        "id": "drawer_confirm",
        "body": {
          "type": "form",
          "api": "/api/mock2/form/saveForm?waitSeconds=2",
          "body": [
              {
                  "type": "input-text",
                  "name": "username",
                  "required": true,
                  "placeholder": "请输入用户名",
                  "label": "用户名"
              },
              {
                  "type": "input-password",
                  "name": "password",
                  "label": "密码",
                  "required": true,
                  "placeholder": "请输入密码"
              },
              {
                  "type": "checkbox",
                  "name": "rememberMe",
                  "label": "记住登录"
              }
          ]
        },
        "actions": [
          {
            "type": "button",
            "label": "触发确认",
            "onEvent": {
              "click": {
                "actions": [
                  {
                    "actionType": "confirm",
                    "componentId": "drawer_confirm"
                  }
                ]
              }
            }
          }
        ]
    }
}

cancel 动作

{
    "type": "button",
    "label": "弹个表单",
    "actionType": "drawer",
    "drawer": {
        "title": "在弹框中的表单",
        "id": "drawer_cancel",
        "body": {
          "type": "form",
          "api": "/api/mock2/form/saveForm?waitSeconds=2",
          "body": [
              {
                  "type": "input-text",
                  "name": "username",
                  "required": true,
                  "placeholder": "请输入用户名",
                  "label": "用户名"
              },
              {
                  "type": "input-password",
                  "name": "password",
                  "label": "密码",
                  "required": true,
                  "placeholder": "请输入密码"
              },
              {
                  "type": "checkbox",
                  "name": "rememberMe",
                  "label": "记住登录"
              }
          ]
        },
        "actions": [
          {
            "type": "button",
            "label": "触发取消",
            "onEvent": {
              "click": {
                "actions": [
                  {
                    "actionType": "cancel",
                    "componentId": "drawer_cancel"
                  }
                ]
              }
            }
          }
        ]
    }
}

setValue 动作

通过setValue更新指定弹窗的数据。

合并数据

默认setValue会将新数据与目标组件数据进行合并。

{
    "type": "button",
    "label": "弹个表单",
    "actionType": "drawer",
    "drawer": {
        "title": "在弹框中的表单",
        "id": "drawer_setvalue",
        "data": {
          "username": "amis",
          "password": "amis@baidu.com"
        },
        "body": [
          {
            "type": "alert",
            "body": "初始化时弹窗的数据data为{username: 'amis', password: 'fex'},表单内或者表单外都可以读取这些数据,当点击【更新弹窗数据】按钮后,弹窗的数据被更新为{username: 'aisuda', password: 'aisuda@baidu.com'}"
          },
          {
            "type": "input-text",
            "label": "表单外的密码",
            "name": "password"
          },
          {
            "type": "form",
            "debug": true,
            "api": "/api/mock2/form/saveForm?waitSeconds=2",
            "body": [
                {
                    "type": "input-text",
                    "name": "username",
                    "required": true,
                    "placeholder": "请输入用户名",
                    "label": "用户名"
                },
                {
                    "type": "input-password",
                    "name": "password",
                    "label": "密码",
                    "required": true,
                    "placeholder": "请输入密码"
                }
            ]
          }
        ],
        "actions": [
          {
            "type": "button",
            "label": "更新弹窗数据",
            "onEvent": {
              "click": {
                "actions": [
                  {
                    "actionType": "setValue",
                    "componentId": "drawer_setvalue",
                    "args": {
                      "value": {
                        "username": "aisuda",
                        "password": "aisuda@baidu.com"
                      }
                    }
                  }
                ]
              }
            }
          }
        ]
    }
}

覆盖数据

可以通过"dataMergeMode": "override"来覆盖目标组件数据。

{
    "type": "button",
    "label": "弹个表单",
    "actionType": "drawer",
    "drawer": {
        "title": "在弹框中的表单",
        "id": "drawer_setvalue2",
        "data": {
          "username": "amis",
          "password": "amis@baidu.com"
        },
        "body": [
          {
            "type": "alert",
            "body": "初始化时弹窗的数据data为{username: 'amis', password: 'fex'},表单内或者表单外都可以读取这些数据,当点击【更新弹窗数据】按钮后,弹窗的数据被更新为{username: 'aisuda'}即password将被删除"
          },
          {
            "type": "input-text",
            "label": "表单外的密码",
            "name": "password"
          },
          {
            "type": "form",
            "debug": true,
            "api": "/api/mock2/form/saveForm?waitSeconds=2",
            "body": [
                {
                    "type": "input-text",
                    "name": "username",
                    "required": true,
                    "placeholder": "请输入用户名",
                    "label": "用户名"
                },
                {
                    "type": "input-password",
                    "name": "password",
                    "label": "密码",
                    "required": true,
                    "placeholder": "请输入密码"
                }
            ]
          }
        ],
        "actions": [
          {
            "type": "button",
            "label": "更新弹窗数据",
            "onEvent": {
              "click": {
                "actions": [
                  {
                    "actionType": "setValue",
                    "componentId": "drawer_setvalue2",
                    "args": {
                      "value": {
                        "username": "aisuda"
                      }
                    },
                    "dataMergeMode": "override"
                  }
                ]
              }
            }
          }
        ]
    }
}