何时使用
对话框是用于在不离开主路径的情况下,提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。
第一个对话框。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 是否显示 | Boolean | false |
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 | 是否显示遮罩 | Boolean | true |
animation | 显示隐藏时动画的播放方式,支持 { in: 'enter-class', out: 'leave-class' } 的对象参数,如果设置为 false,则不播放动画。 请参考 Animate 组件的文档获取可用的动画名 | Object/Boolean | { in: 'expandInDown', out: 'expandOutUp' } |
autoFocus | 对话框弹出时是否自动获得焦点 | Boolean | false |
align | 对话框对齐方式, 具体见Overlay文档 | String/Boolean | 'cc cc' |
isFullScreen | 当对话框高度超过浏览器视口高度时,是否显示所有内容而不是出现滚动条以保证对话框完整显示在浏览器视口内,该属性仅在对话框垂直水平居中时生效,即 align 被设置为 'cc cc' 时 | Boolean | false |
shouldUpdatePosition | 是否在对话框重新渲染时及时更新对话框位置,一般用于对话框高度变化后依然能保证原来的对齐方式 | Boolean | false |
minMargin | 对话框距离浏览器顶部和底部的最小间距,align 被设置为 'cc cc' 并且 isFullScreen 被设置为 true 时不生效 | Number | 40 |
overlayProps | 透传到弹层组件的属性对象 | Object | {} |
height | 对话框的高度样式属性 | String | - |
以下只列举 config 可以传入的常用属性,Dialog 组件的其他属性也可以传入
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | ReactNode | '' |
content | 内容 | ReactNode | '' |
onOk | 在点击确定按钮时触发的回调函数 | Function | () => {} |
onCancel | 在点击取消按钮时触发的回调函数 | Function | () => {} |
messageProps | 内嵌 Message 组件属性对象 | Object | {} |
以下只列举 config 可以传入的常用属性,Dialog 组件其他属性也可以传入
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | ReactNode | '' |
content | 内容 | ReactNode | '' |
onOk | 在点击确定按钮时触发的回调函数 | Function | () => {} |
onCancel | 在点击取消按钮时触发的回调函数 | Function | () => {} |