# Dialog 弹窗

`infoDialog` 是库中统一的弹窗组件，基于 Element Plus Dialog / Drawer 封装，支持标题、底部按钮、抽屉模式和自定义操作区。

## 基础用法

```vue
<template>
  <info-dialog
    :options="dialogConfig"
    @closeDialog="closeDialog"
    @confirmDialog="confirmDialog"
  >
    <div>这里放表单或自定义内容</div>
  </info-dialog>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const dialogConfig = reactive({
  title: '新增',
  isShowDialog: true,
  width: '50%',
  isShowBtn: true
})

const closeDialog = () => {
  dialogConfig.isShowDialog = false
}

const confirmDialog = () => {
  console.log('confirm')
}
</script>
```

## 常用配置

| 参数 | 说明 | 类型 |
| --- | --- | --- |
| title | 弹窗标题 | string / Function |
| isShowDialog | 是否显示 | boolean |
| width | 宽度 | string |
| isShowBtn | 是否显示默认底部按钮 | boolean |
| isDrawer | 是否切换为抽屉模式 | boolean |
| dialogOperates | 自定义底部操作按钮 | OperatesInterface[] |

## 事件

| 事件名 | 说明 |
| --- | --- |
| closeDialog | 关闭弹窗时触发 |
| confirmDialog | 点击确认时触发 |
| open | 弹窗打开时触发 |