> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Dialog 对话框

> Dialog 对话框组件文档，涵盖弹窗的打开关闭控制、尺寸与操作区等属性配置，用于承载信息确认与轻量操作。

## 何时使用

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

## 组件示例

<iframe src="https://www.aliwork.com/developer/dialog-v2?isRenderNav=false" width="100%" height="480" frameBorder="0" />

## 组件属性

| 属性              | 说明                                                                       | 类型                                                      | 默认值           |
| --------------- | ------------------------------------------------------------------------ | ------------------------------------------------------- | ------------- |
| `afterClose`    | 对话框关闭后事件                                                                 | `() => void`                                            | -             |
| `afterOpen`     | 对话框打开后事件                                                                 | `() => void`                                            | -             |
| `autoFocus`     | 自动聚焦，Dialog打开时是否自动聚焦到内部的表单项                                              | `boolean`                                               | `true`        |
| `cancelText`    | 取消按钮文案                                                                   | `string`                                                | `'取消'`        |
| `closeable`     | 关闭对话框方式，esc：点击 ESC 按键关闭、mask：点击遮罩关闭                                      | `'esc' \| 'mask'`                                       | `'esc'`       |
| `confirmState`  | 确定按钮的确认状态                                                                | `'NORMAL' \| 'DISABLED' \| 'LOADING'`                   | `'NORMAL'`    |
| `confirmStyle`  | 确定按钮类型，参考 **Button** 组件的[文档](/zh/open/yida/components/basic/button#组件属性) | `'primary' \| 'warning' \| 'ghostLight' \| 'ghostDark'` | `'primary'`   |
| `confirmText`   | 确定按钮内文案                                                                  | `string`                                                | `'确定'`        |
| `footer`        | 底部按钮是否显示                                                                 | `boolean`                                               | `true`        |
| `footerActions` | 对话框底部默认按钮排列方式，cancel代表取消按钮，ok代表确定按钮                                      | `'cancel,ok' \| 'cancel,ok' \| 'ok' \| 'cancel'`        | `'cancel,ok'` |
| `footerAlign`   | 对话框确定按钮和取消按钮对齐方式                                                         | `'left' \| 'center' \| 'right'`                         | `'right'`     |
| `hasMask`       | 遮罩是否显示                                                                   | `boolean`                                               | `true`        |
| `height`        | 对话框高度                                                                    | `number`                                                | -             |
| `onCancel`      | 点击取消按钮时事件                                                                | `() => void`                                            | -             |
| `onClose`       | 对话框关闭时事件                                                                 | `() => void`                                            | -             |
| `onOk`          | 点击确定按钮时事件                                                                | `() => void`                                            | -             |
| `onOpen`        | 对话框打开时事件                                                                 | `() => void`                                            | -             |
| `title`         | 对话框标题                                                                    | `string`                                                | `'Dialog标题'`  |
| `visible`       | 对话框是否显示                                                                  | `boolean`                                               | `false`       |
| `width`         | 对话框宽度                                                                    | `number`                                                | -             |