rat-dialog

组件介绍

• chinese: 弹窗
• category: Components
• type: 弹层

使用指南

对话框

何时使用

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

API

Dialog

| 参数 | 说明 | 类型 | 默认值 | | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | --------------------------------------------------------------------------------- | | 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 | | align | 对话框对齐方式 | String/Boolean | 'cc cc' |

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 | () => {} |

ARIA and Keyboard

| 键盘 | 说明 | | :-------- | :--------------------------------------- | | esc | 按下ESC键将会关闭dialog而不触发任何的动作 | | tab | 正向聚焦到任何可以被聚焦的元素， 在Dialog显示的时候，焦点始终保持在框体内 | | shift+tab | 反向聚焦到任何可以被聚焦的元素，在Dialog显示的时候，焦点始终保持在框体内 |