# useFormDialog 表单对话框

基于 useDialog 实现的表单对话框，集成 EpForm 组件，支持表单验证。

## 基本用法

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

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


const FormDialog = useFormDialog({
  title: '用户信息',
  formItemList:[
    { prop: 'name', label: '姓名', required: true },
    { prop: 'age', label: '年龄' },
  ],
  dialogProps: {
    destroyOnClose: true, // 关闭时销毁对话框内容
  },
})

const openDialog = async () => {
  try {
    const formData = await FormDialog.open()
    console.log('表单数据', formData)
  } catch (e) {
    console.log('取消')
  }
}
</script>
```

## Options

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| title | 对话框标题 | `string` | - |
| width | 对话框宽度 | `string` | `'80%'` |
| dialogProps | 对话框属性，继承自 useDialog | `DialogOptions` | - |
| formData | 表单数据对象 | `object` | - |
| formItemList | 表单项配置，参考 [EpForm](./form.md) | `FormItemProps[]` | - |
| onBeforeConfirm | 确认前回调，可用于额外处理 | `(formData, resolve) => Promise<void>` | - |
| onBeforeCancel | 取消前回调 | `(formData, resolve) => Promise<void>` | - |

## 自定义表单数据

```tsx
const formData = reactive({
  name: '',
  age: '',
})

const FormDialog = useFormDialog({
  title: '编辑用户',
  formData, // 传入外部表单数据
  formItemList,
})
```

## 确认前处理

```tsx
const FormDialog = useFormDialog({
  title: '提交表单',
  formItemList,
  onBeforeConfirm: async (formData, resolve) => {
    // 可以在此处进行额外的异步操作
    await api.submit(formData)
    resolve(formData)
  },
})
```

## 方法

| 方法 | 说明 | 类型 |
|------|------|------|
| open | 打开对话框并返回 Promise | `() => Promise<FormData>` |
| open | 打开对话框 | `() => void` |
| close | 关闭对话框 | `() => void` |