文档Tags:
dialog

Dialog 弹窗

何时使用

对话框是用于在不离开主路径的情况下,提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。

基本

第一个对话框。

Loading demo...

APIs

Dialog

参数说明类型默认值
visible是否显示Booleanfalse
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['ok', 'cancel']
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'
onClose对话框关闭时触发的回调函数

签名:
Function(trigger: String, event: Object) => void
参数:
trigger: {String} 关闭触发行为的描述字符串
event: {Object} 关闭时事件对象
Function() => {}
afterClose对话框关闭后触发的回调函数, 如果有动画,则在动画结束后触发

签名:
Function() => void
Function() => {}
hasMask是否显示遮罩Booleantrue
animation显示隐藏时动画的播放方式,支持 { in: 'enter-class', out: 'leave-class' } 的对象参数,如果设置为 false,则不播放动画。 请参考 Animate 组件的文档获取可用的动画名Object/Boolean{ in: 'expandInDown', out: 'expandOutUp' }
autoFocus对话框弹出时是否自动获得焦点Booleanfalse
align对话框对齐方式, 具体见Overlay文档String/Boolean'cc cc'
isFullScreen当对话框高度超过浏览器视口高度时,是否显示所有内容而不是出现滚动条以保证对话框完整显示在浏览器视口内,该属性仅在对话框垂直水平居中时生效,即 align 被设置为 'cc cc' 时Booleanfalse
shouldUpdatePosition是否在对话框重新渲染时及时更新对话框位置,一般用于对话框高度变化后依然能保证原来的对齐方式Booleanfalse
minMargin对话框距离浏览器顶部和底部的最小间距,align 被设置为 'cc cc' 并且 isFullScreen 被设置为 true 时不生效Number40
overlayProps透传到弹层组件的属性对象Object{}
height对话框的高度样式属性String-

Dialog.alert(config)/Dialog.confirm(config)

以下只列举 config 可以传入的常用属性,Dialog 组件的其他属性也可以传入

属性说明类型默认值
title标题ReactNode''
content内容ReactNode''
onOk在点击确定按钮时触发的回调函数Function() => {}
onCancel在点击取消按钮时触发的回调函数Function() => {}
messageProps内嵌 Message 组件属性对象Object{}

Dialog.show

以下只列举 config 可以传入的常用属性,Dialog 组件其他属性也可以传入

属性说明类型默认值
title标题ReactNode''
content内容ReactNode''
onOk在点击确定按钮时触发的回调函数Function() => {}
onCancel在点击取消按钮时触发的回调函数Function() => {}

Demo

定制底部按钮

Loading demo...

自定义底部

Loading demo...

更新位置

Loading demo...

内容较多的对话框

Loading demo...

快捷调用

Loading demo...

延迟关闭

Loading demo...