# EpDialog 对话框

基于 useDialog hook 实现的对话框，支持 Promise 方式调用。

## 基本用法

```vue
<template>
  <el-button @click="openDialog">打开对话框</el-button>
  <Dialog />
</template>

<script setup lang="tsx">
import { useDialog } from 'el-plus'

const Dialog = useDialog({
  title: '对话框标题',
  width: '600px',
  onConfirm: (resolve) => {
    // 确认逻辑
    resolve('success')
  },
  onCancel: (reject) => {
    reject('cancel')
  },
})

const openDialog = async () => {
  try {
    const result = await Dialog.start()
    console.log('确认', result)
  } catch (e) {
    console.log('取消', e)
  }
}
</script>
```

## useDialog Options

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| title | 对话框标题 ^el^ | `string` | '提示' |
| width | 对话框宽度 ^el^ | `string` | - |
| showFooter | 显示底部按钮 | `boolean` | `true` |
| confirmText | 确认按钮文本 | `string` | '确定' |
| cancelText | 取消按钮文本 | `string` | '取消' |
| onConfirm | 确认回调 | `(resolve) => void` | - |
| onBeforeConfirm | 确认前回调 | `(resolve) => void` | - |
| onCancel | 取消回调 | `(reject) => void` | - |
| onBeforeCancel | 取消前回调 | `(reject) => void` | - |
| render | 自定义渲染函数 | `(props) => VNode` | - |
| scopedSlots | 插槽 | `object` | - |
| destroyOnClose | 关闭时销毁 ^el^ | `boolean` | - |

> ^el^ 表示继承自 [el-dialog](https://element-plus.org/zh-CN/component/dialog.html) 的属性

## 自定义内容

```tsx
const Dialog = useDialog({
  title: '自定义内容',
  render: ({ resolve, reject }) => (
    <div>
      <p>自定义内容</p>
      <EpForm v-model={formData} formItemList={formItemList} />
    </div>
  ),
  onConfirm: async (resolve) => {
    const valid = await formRef.value?.validate()
    if (valid) {
      resolve(formData)
    }
  },
})
```

## 使用插槽

```vue
<template>
  <Dialog>
    <template #default="{ resolve, reject }">
      <p>对话框内容</p>
    </template>
  </Dialog>
</template>

<script setup>
import { useDialog } from 'el-plus'

const Dialog = useDialog({
  title: '使用插槽',
})
</script>
```

## 其他对话框 Hooks

| Hook | 说明 |
|------|------|
| [useFormDialog](./use-form-dialog.md) | 表单对话框 |
| [useConfirmDialog](./use-confirm-dialog.md) | 确认对话框 |
| [useChooseDialog](./use-choose-dialog.md) | 选择对话框 |