--- title: Modal 弹窗 order: 9 group: path: /components nav: title: 组件 path: /components --- ## 使用 模态弹窗是一个伴随遮罩（50%#000000）出现的容器，阻断了用户当前的流程，要求用户进行操作或做出选择 ### 使用原则 `信息提示弹窗` 和 `确认对话框` 宽度固定，高度随内容自动适配。实际设计中遇到超过三行的文案，建议先考虑精简。 - **信息提示弹窗：** `Modal.info`、`Modal.success`、`Modal.error`、`Modal.warning` 用于引导用户进行操作或操作后的结果，包括引导提示、警告提示、失败提示、成功提示。 - **确认对话框：** `Modal.confirm` 用于用户对自己操作的内容进行二次确认。 ### 消息提示 默认有取消按钮 ```jsx import React from 'react'; import { Modal, Button } from 'quanta-design'; class BasicNotification extends React.Component { constructor() { super(); } render() { const handleInfo = e => { Modal.info({ title: '这是消息模态弹窗', content: '段落文字内容段落文字内容段落文字内容段落文字', onOk: () => {}, }); }; const handleWarning = e => { Modal.warning({ title: '这是警告模态弹窗', content: '段落文字内容段落文字内容段落文字内容段落文字', onOk: () => {}, }); }; const handleError = e => { Modal.error({ title: '这是失败模态弹窗', content: '段落文字内容段落文字内容段落文字内容段落文字', onOk: () => {}, }); }; const handleSuccess = e => { Modal.success({ title: '这是成功模态弹窗', content: '段落文字内容段落文字内容段落文字内容段落文字', onOk: () => {}, }); }; return ( <> ); } } export default BasicNotification; ``` 没有取消按钮的消息提示 ```jsx import React from 'react'; import { Modal, Button } from 'quanta-design'; class BasicModal extends React.Component { constructor() { super(); } render() { const handleInfo = e => { Modal.info({ title: '这是消息模态弹窗', content: '段落文字内容段落文字内容段落文字内容段落文字', showCancelBtn: false, onOk: () => {}, }); }; const handleWarning = e => { Modal.warning({ title: '这是警告模态弹窗', content: '段落文字内容段落文字内容段落文字内容段落文字', showCancelBtn: false, onOk: () => {}, }); }; const handleError = e => { Modal.error({ title: '这是失败模态弹窗', content: '段落文字内容段落文字内容段落文字内容段落文字', showCancelBtn: false, onOk: () => {}, }); }; const handleSuccess = e => { Modal.success({ title: '这是成功模态弹窗', content: '段落文字内容段落文字内容段落文字内容段落文字', showCancelBtn: false, onOk: () => {}, }); }; return ( <> ); } } export default BasicModal; ``` ### 确认对话框 ```jsx import React from 'react'; import { Modal, Button } from 'quanta-design'; const { confirm } = Modal; class BasicConfirm extends React.Component { constructor() { super(); } handleClose = () => { Modal.destroyAll(); }; render() { const handleConfirm = e => { this.confirm = confirm({ title: '确定删除该项目吗？', content: (
段落文字内容段落文字内容段落文字内容段落文字
), onOk: () => {}, onCancel: () => {}, }); }; return ; } } export default BasicConfirm; ``` ### 普通模态框 ```jsx import React from 'react'; import { Modal, Button } from 'quanta-design'; class BasicModal extends React.Component { constructor() { super(); this.state = { visible: false, }; } render() { const { visible } = this.state; const handleShow = e => { this.setState({ visible: true }); }; const handleClose = () => { this.setState({ visible: false }); }; return ( <> BalaBala... ); } } export default BasicModal; ``` ### 等待加载对话框 ```jsx import React from 'react'; import { Modal, Button } from 'quanta-design'; const { waiting } = Modal; class BasicWaiting extends React.Component { constructor() { super(); } render() { const handleWaiting = e => { waiting({ content: '部署时间预计1分钟以内，请耐心等待', onOk: () => {}, onCancel: () => {}, }); }; return ; } } export default BasicWaiting; ``` ## API | 参数 | 说明 | 类型 | 默认值 | | ----------------- | ---------------------------------------------------------- | -------------------------------------------------------- | ------------- | | afterClose | Modal 完全关闭后的回调 | function | - | | bodyStyle | Modal body 样式 | object | {} | | cancelText | 取消按钮文字 | string\|ReactNode | 取消 | | centered | 垂直居中展示 Modal | Boolean | `false` | | closable | 是否显示右上角的关闭按钮 | boolean | true | | closeIcon | 自定义关闭图标 | ReactNode | - | | confirmLoading | 确定按钮 loading | boolean | - | | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false | | footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | string\|ReactNode | 确定取消按钮 | | forceRender | 强制渲染 Modal | boolean | false | | getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| `() => HTMLElement` \| Selectors \| false | document.body | | keyboard | 是否支持键盘 esc 关闭 | boolean | true | | mask | 是否展示遮罩 | Boolean | true | | maskClosable | 点击蒙层是否允许关闭 | boolean | true | | maskStyle | 遮罩样式 | object | {} | | okText | 确认按钮文字 | string\|ReactNode | 确定 | | okType | 确认按钮类型 | string | primary | | okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | | cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | | style | 可用于设置浮层的样式，调整浮层位置等 | object | - | | title | 标题 | string\|ReactNode | - | | visible | 对话框是否可见 | boolean | - | | width | 宽度 | string\|number | 520 | | wrapClassName | 对话框外层容器的类名 | string | - | | zIndex | 设置 Modal 的 `z-index` | Number | 1000 | | onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - | | onOk | 点击确定回调 | function(e) | - | #### 注意 > `` 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 `destroyOnClose`。 ### Modal.method() 包括： - `Modal.confirm` - `Modal.info` - `Modal.success` - `Modal.error` - `Modal.warning` 以上均为一个函数，参数为 object，具体属性如下： | 参数 | 说明 | 类型 | 默认值 | | ----------------- | ---------------------------------------------------------------- | --------------------------------- | -------------------- | | showCancelBtn | **_自定义参数_**，设置取消按钮是否可见 | boolean | true | | autoFocusButton | 指定自动获得焦点的按钮 | null\| `ok` \| `cancel` | `ok` | | cancelText | 设置 Modal.confirm 取消按钮文字 | string | 取消 | | centered | 垂直居中展示 Modal | Boolean | `false` | | className | 容器类名 | string | - | | content | 内容 | string\|ReactNode | - | | icon | 自定义图标（3.12.0 新增） | ReactNode | `` | | maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | | okText | 确认按钮文字 | string | 确定 | | okType | 确认按钮类型 | string | primary | | okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | | cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | | title | 标题 | string\|ReactNode | - | | width | 宽度 | string\|number | 416 | | zIndex | 设置 Modal 的 `z-index` | Number | 1000 | | onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | - | | onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | - |