---
name: Dialog 对话框
route: /dialog
menu: 交互组件
---

import { Playground } from 'docz';
import Dialog from './index';
import Button from '../button/index';

## 演示

### 简单示例

<Playground>
  {() => {
    const [visible, setVisible] = React.useState(false);
    return (
      <div>
        <Button onClick={() => setVisible(true)}>打开对话框</Button>
        <Dialog
          visible={visible}
          onVisibleChange={setVisible}
          header="提示"
          onOk={() => setVisible(false)}
        >
          <div>对话框内容</div>
          <div>对话框内容</div>
        </Dialog>
      </div>
    );
  }}
</Playground>

### Dialog.open

对话框是相当常见的组件，并且在一个页面内可能会存在多个不同的对话框，如果每个对话框都需要通过`visible`和`onVisibleChange`来控制显示状态，那么代码写起来就很难受。
因此为了方便使用，提供了`Dialog.open(props: DialogProps): () => void`静态方法，该方法返回一个可用于自行关闭对话框的函数。

<Playground>
  {() => {
    let close = () => {};
    const handleClick = () => {
      close = Dialog.open({
        header: '提示',
        children: <Button onClick={() => close()}>自行关闭对话框</Button>
      });
    };
    return (
      <Button onClick={handleClick}>打开对话框</Button>
    );
  }}
</Playground>

## API

### Props

| 参数 | 类型 | 默认值 | 说明 |
|-----|------|-------|-----|
| visible | `boolean` | - | 是否显示 |
| mask | `boolean` | `true` | 是否显示蒙层 |
| maskClosable | `boolean` | `true` | 点击蒙层是否可以关闭弹窗 |
| keyClosable | `boolean` | `true` | 点击`esc`按键是否可以关闭弹窗 |
| header | `React.ReactNode` | - | 头部 |
| footer | `React.ReactNode` | - | 脚部 |
| okType | `DialogButtonType` | `primary` | 确认按钮的类型 |
| cancelType | `DialogButtonType` | `default` | 取消按钮的类型 |
| okText | `React.ReactNode` | `确认` | 确认按钮的文案 |
| cancelText | `React.ReactNode` | `取消` | 取消按钮的文案 |
| okProps | `ButtonProps` | - | 确认按钮的 props |
| cancelProps | `ButtonProps` | - | 取消按钮的 props |
| onOk | `() => void` | - | 确认按钮点击事件 |
| onCancel | `() => void` | - | 取消按钮点击事件 |
| onVisibleChange | `(visible: boolean) => void` | - | 可见性变更事件 |
| onExited | `() => void` | - | 关闭弹窗动画结束后触发的事件 |
| className | `string` | - | 类名 |
| style | `React.CSSProperties` | - | 样式 |
| contentClassName | `string` | - | 类名 |
| contentStyle | `React.CSSProperties` | - | 样式 |