---
title: ProDialog 对话框组件
---

# ProDialog 对话框组件

ProDialog 是基于 Element Plus Dialog 的对话框组件，支持自定义头部样式，可以与 ProForm 结合使用。

## 说明

ProDialog 封装了 Element Plus 的 Dialog 组件，提供了统一的头部样式和关闭按钮。支持所有 Dialog 的原生属性，可以与 ProForm 结合使用创建表单对话框。

## API

### Props

ProDialog 支持所有 Element Plus Dialog 的原生属性，主要属性包括：

| 参数                  | 说明                     | 类型      | 默认值  |
| --------------------- | ------------------------ | --------- | ------- |
| modelValue / v-model  | 是否显示对话框           | `Boolean` | `false` |
| title                 | 对话框标题               | `String`  | -       |
| width                 | 对话框宽度               | `String`  | `'50%'` |
| close-on-click-modal  | 是否可以通过点击遮罩关闭 | `Boolean` | `true`  |
| close-on-press-escape | 是否可以通过 ESC 关闭    | `Boolean` | `true`  |
| show-close            | 是否显示关闭按钮         | `Boolean` | `true`  |

### Slots

| 插槽名  | 说明           |
| ------- | -------------- |
| default | 对话框内容     |
| footer  | 对话框底部内容 |

### Events

ProDialog 支持所有 Element Plus Dialog 的事件，如 `closed`、`open` 等。

## 示例

:::example

pro-dialog/basic

:::