使用指南
对话框是用于在不离开主路径的情况下，提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。
基本
第一个对话框
嵌套表单
弹层出内嵌表单
When the height of the dialog exceeds the viewport height of the browser, whether to show the scroll bar:
内容较多的对话框
当对话框高度超过浏览器视口高度时，默认会让对话框 Body 区域出现滚动条，以保证底部按钮可以直接出现在视口内，方便操作，如果你想不想出现滚动条，而是展示对话框内所有内容，请设置 isFullScreen 为 true。
快捷调用
Dialog 提供 notice,warning,error,success的快捷调用方式，以及更底层的 show 方式。
延迟关闭
在使用 Dialog快捷调用时，如果 onOk 返回 Promise，对话框会在 Promise resolve 时关闭，除非调用 resolve(false)。
无障碍
通过okProps与cancelProps设置aria-label属性，屏幕阅读器读取确定和取消按钮。关于键盘操作请参考ARIA and KeyBoard。
设置高度
使用 'height' 属性设置 Dialog 高度。
分步弹窗
弹窗内容分步
API
Dialog
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| visible | 是否显示 | Boolean | false |
| loading | 是否加载中 | Boolean | false |
| loadingTip | 加载时的提示内容 | ReactNode | - |
| title | 标题 | ReactNode | - |
| children | 内容 | ReactNode | - |
| footer | 底部内容，设置为 false，则不进行显示 | Boolean/ReactNode | <Button type="primary">确定</Button>, <Button>取消</Button> |
| footerAlign | 底部按钮的对齐方式 可选值: 'left', 'center', 'right' | Enum | 'right' |
| footerActions | 指定确定按钮和取消按钮是否存在以及如何排列, 可选值： 'ok', 'cancel'（确认取消按钮同时存在，确认按钮在左） 'cancel', 'ok'（确认取消按钮同时存在，确认按钮在右） 'ok'（只存在确认按钮） 'cancel'（只存在取消按钮） | Array | 'cancel', 'ok' |
| onOk | 在点击确定按钮时触发的回调函数 签名: Function(event: Object) => void 参数: event: {Object} 点击事件对象 | Function | () => {} |
| onCancel | 在点击取消按钮时触发的回调函数 签名: Function(event: Object) => void 参数: event: {Object} 点击事件对象 | Function | () => {} |
| okProps | 应用于确定按钮的属性对象 | Object | {} |
| cancelProps | 应用于取消按钮的属性对象 | Object | {} |
| closeable | 控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成： close 表示点击关闭按钮可以关闭对话框 mask 表示点击遮罩区域可以关闭对话框 esc 表示按下 esc 键可以关闭对话框 如 'close' 或 'close,esc,mask' 如果设置为 true，则以上关闭方式全部生效 如果设置为 false，则以上关闭方式全部失效 | String/Boolean | 'esc,close,mask' |
| onClose | 对话框关闭时触发的回调函数 签名: Function(trigger: String, event: Object) => void 参数: trigger: {String} 关闭触发行为的描述字符串 event: {Object} 关闭时事件对象 | Function | () => {} |
| afterClose | 对话框关闭后触发的回调函数, 如果有动画，则在动画结束后触发 签名: Function() => void | Function | () => {} |
| hasMask | 是否显示遮罩 | Boolean | true |
| animation | 显示隐藏时动画的播放方式 | Object/Boolean | { in: 'fadeInDown', out: 'fadeOutUp', } |
| autoFocus | 对话框弹出时是否自动获得焦点 | Boolean | false |
| minMargin | 对话框距离浏览器顶部间距和底部的最小间距 | Number | 56 |
| height | 对话框的高度样式属性 | String | - |
| noBodyPadding | 内容区无padding | Boolean | false |
Dialog.notice(config)/Dialog.warning(config)/Dialog.error(config)/Dialog.success(config)
以下只列举 config 可以传入的常用属性，Dialog 组件的其他属性也可以传入
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | ReactNode | '' |
| content | 内容 | ReactNode | '' |
| onOk | 在点击确定按钮时触发的回调函数 | Function | () => {} |
| onCancel | 在点击取消按钮时触发的回调函数 | Function | () => {} |
| messageProps | 内嵌 Message 组件属性对象 | Object | {} |
Dialog.show
以下只列举 config 可以传入的常用属性，Dialog 组件其他属性也可以传入
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 类型，可选值notice, warning, error, success, | String | notice |
| title | 标题 | ReactNode | '' |
| content | 内容 | ReactNode | '' |
| onOk | 在点击确定按钮时触发的回调函数 | Function | () => {} |
| onCancel | 在点击取消按钮时触发的回调函数 | Function | () => {} |
以上快捷调用函数调用后会返回一个引用，可以通过引用更新和关闭Dialog
示例
const dialog = Dialog.show({
title: '标题',
content: '内容',
});
dialog.update({
title: '新标题',
content: '新内容',
})
dialog.hide();Dialog.StepDialog
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| visible | 是否显示 | Boolean | false |
| loading | 是否加载中 | Boolean | false |
| loadingTip | 加载时的提示内容 | ReactNode | - |
| title | 标题 | ReactNode | - |
| children | 内容 | ReactNode | - |
| closeable | 控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成： close 表示点击关闭按钮可以关闭对话框 mask 表示点击遮罩区域可以关闭对话框 esc 表示按下 esc 键可以关闭对话框 如 'close' 或 'close,esc,mask' 如果设置为 true，则以上关闭方式全部生效 如果设置为 false，则以上关闭方式全部失效 | String/Boolean | 'esc,close' |
| onClose | 对话框关闭时触发的回调函数 签名: Function(trigger: String, event: Object) => void 参数: trigger: {String} 关闭触发行为的描述字符串 event: {Object} 关闭时事件对象 | Function | () => {} |
| afterClose | 对话框关闭后触发的回调函数, 如果有动画，则在动画结束后触发 签名: Function() => void | Function | () => {} |
| hasMask | 是否显示遮罩 | Boolean | true |
| animation | 显示隐藏时动画的播放方式 | Object/Boolean | { in: 'fadeInDown', out: 'fadeOutUp', } |
| autoFocus | 对话框弹出时是否自动获得焦点 | Boolean | false |
| minMargin | 对话框距离浏览器顶部间距和底部的最小间距 | Number | 56 |
| height | 对话框的高度样式属性 | String | - |
| noBodyPadding | 内容区无padding | Boolean | false |
| defaultCurrent | 默认步骤屏id，非受控 | String | - |
| current | 当前步骤屏id，受控 | String | - |
| onStepChange | 步骤屏发生变化时的回调 | func | (current) => {} |
Dialog.StepView
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| id | 当前屏唯一标识 | String | - |
| title | 当前屏弹窗标题 | ReactNode | - |
| footer | 当前屏弹窗底部 | ReactNode | - |
| children | 当前屏内容 | ReactNode |
常见问题
ARIA and Keyboard
| 键盘 | 说明 |
|---|---|
| esc | 按下ESC键将会关闭dialog而不触发任何的动作 |
| tab | 正向聚焦到任何可以被聚焦的元素， 在Dialog显示的时候，焦点始终保持在框体内 |
| shift+tab | 反向聚焦到任何可以被聚焦的元素，在Dialog显示的时候，焦点始终保持在框体内 |