Drawer 抽屉

基本用法

```schema: scope=”body” { “label”: “弹出”, “type”: “button”, “actionType”: “drawer”, “drawer”: { “title”: “抽屉标题”, “body”: “这是一个抽屉” } }

  2. ## 抽屉尺寸
  4. ```schema: scope="body"
  5. {
  6.     "type": "button-toolbar",
  7.     "className": "block m-t",
  8.     "buttons": [
  9.         {
  10.             "type": "button",
  11.             "label": "极小框",
  12.             "actionType": "drawer",
  13.             "drawer": {
  14.                 "position": "right",
  15.                 "size": "xs",
  16.                 "title": "提示",
  17.                 "body": "这是个简单的弹框"
  18.             }
  19.         },
  20.         {
  21.             "type": "button",
  22.             "label": "小框",
  23.             "actionType": "drawer",
  24.             "drawer": {
  25.                 "position": "right",
  26.                 "size": "sm",
  27.                 "title": "提示",
  28.                 "body": "这是个简单的弹框"
  29.             }
  30.         },
  31.         {
  32.             "type": "button",
  33.             "label": "中框",
  34.             "actionType": "drawer",
  35.             "drawer": {
  36.                 "position": "right",
  37.                 "size": "md",
  38.                 "title": "提示",
  39.                 "body": "这是个简单的弹框"
  40.             }
  41.         },
  42.         {
  43.             "type": "button",
  44.             "label": "大框",
  45.             "actionType": "drawer",
  46.             "drawer": {
  47.                 "position": "right",
  48.                 "size": "lg",
  49.                 "title": "提示",
  50.                 "body": "这是个简单的弹框"
  51.             }
  52.         },
  53.         {
  54.             "type": "button",
  55.             "label": "超大框",
  56.             "actionType": "drawer",
  57.             "drawer": {
  58.                 "size": "xl",
  59.                 "position": "right",
  60.                 "title": "提示",
  61.                 "body": "这是个简单的弹框"
  62.             }
  63.         },
  64.     ]
  65. }

自定义抽屉尺寸

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

```schema: scope=”body” { “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高度的弹框” } }, ] }

  2. ## 指定弹出方向
  4. ```schema: scope="body"
  5. {
  6.     "type": "button-toolbar",
  7.     "className": "block m-t",
  8.     "buttons": [
  9.         {
  10.             "type": "button",
  11.             "label": "左侧弹出",
  12.             "actionType": "drawer",
  13.             "drawer": {
  14.                 "position": "left",
  15.                 "title": "提示",
  16.                 "body": "这是个简单的弹框"
  17.             }
  18.         },
  19.         {
  20.             "type": "button",
  21.             "label": "右侧弹出",
  22.             "actionType": "drawer",
  23.             "drawer": {
  24.                 "position": "right",
  25.                 "title": "提示",
  26.                 "body": "这是个简单的弹框"
  27.             }
  28.         },
  29.         {
  30.             "type": "button",
  31.             "label": "顶部弹出",
  32.             "actionType": "drawer",
  33.             "drawer": {
  34.                 "position": "top",
  35.                 "title": "提示",
  36.                 "body": "这是个简单的弹框"
  37.             }
  38.         },
  39.         {
  40.             "type": "button",
  41.             "label": "底部弹出",
  42.             "actionType": "drawer",
  43.             "drawer": {
  44.                 "position": "bottom",
  45.                 "title": "提示",
  46.                 "body": "这是个简单的弹框"
  47.             }
  48.         }
  49.     ]
  50. }

可拖拽抽屉大小

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

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

  2. ## 是否展示关闭按钮
  4. 配置`"showCloseButton": false`，可以隐藏关闭按钮
  6. ```schema: scope="body"
  7. {
  8.     "type": "button",
  9.     "label": "无关闭按钮",
  10.     "actionType": "drawer",
  11.     "drawer": {
  12.         "position": "right",
  13.         "title": "提示",
  14.         "body": "这是个简单的弹框",
  15.         "showCloseButton": false
  16.     }
  17. }

不显示蒙层

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

  2. ## 点击抽屉外自动关闭
  4. 配置`"closeOnOutside":true`
  6. ### 显示蒙层
  8. ```schema: scope="body"
  9. {
  10.     "type": "button",
  11.     "label": "点击抽屉外自动关闭",
  12.     "actionType": "drawer",
  13.     "drawer": {
  14.         "position": "right",
  15.         "closeOnOutside": true,
  16.         "title": "提示",
  17.         "body": "这是个简单的弹框"
  18.     }
  19. }

不显示蒙层

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

属性表

属性名 类型 默认值 说明
type string "drawer" 指定为 Drawer 渲染器
title SchemaNode 弹出层标题
body SchemaNode 往 Drawer 内容区加内容
size string 指定 Drawer 大小，支持: xs、sm、md、lg、xl
position string 指定 Drawer 方向，支持: left、right、top、bottom
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 为 left 或 right 时生效
height `string \ number` 500px 容器的高度，在 position 为 top 或 bottom 时生效
actions Array<Action> 【确认】和【取消】 可以不设置，默认只有两个按钮。
data object 支持 数据映射，如果不设定将默认将触发按钮的上下文中继承数据。

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据，详细请查看事件动作。

事件名称 事件参数 说明
confirm event.data: object 抽屉数据 点击确认提交时触发
cancel event.data: object 抽屉数据 点击取消时触发

动作表

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

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