# DialogBox 通用对话框组件

一个基于 Wot Design Uni 的通用对话框组件，支持自定义图标、消息、按钮等。

## 功能特性

- 🎨 支持自定义图标和大小
- 📝 支持多行消息显示
- 🔘 可选择显示/隐藏按钮
- 💡 可选择显示/隐藏提示信息
- 🖱️ 支持点击遮罩关闭
- 📱 响应式设计，适配移动端

## Props

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| show | boolean | false | 是否显示对话框 |
| btnText | string | 'Got it' | 按钮文本 |
| icon | string | 'info-circle' | 图标名称 |
| iconSize | string | '120rpx' | 图标大小 |
| message | string | '' | 主要消息内容 |
| tip | string | '' | 提示信息 |
| showButton | boolean | true | 是否显示按钮 |
| showTip | boolean | false | 是否显示提示信息 |
| closeOnClickOverlay | boolean | true | 点击遮罩是否关闭 |

## Events

| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:show | 显示状态更新 | (value: boolean) |
| confirm | 按钮点击事件 | - |
| close | 对话框关闭事件 | - |

## 使用示例

### 基础用法

```vue
<template>
  <DialogBox 
    v-model:show="showDialog"
    message="这是一个基础对话框"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import DialogBox from '@/components/DialogBox/DialogBox.vue'

const showDialog = ref(false)

const handleConfirm = () => {
  console.log('用户点击了确认')
}
</script>
```

### 带提示信息

```vue
<template>
  <DialogBox 
    v-model:show="showDialog"
    icon="warning"
    message="余额不足，请充值！"
    tip="充值享受最高5%折扣"
    :showTip="true"
    btnText="去充值"
    @confirm="handleRecharge"
  />
</template>
```

### 仅显示消息（无按钮）

```vue
<template>
  <DialogBox 
    v-model:show="showDialog"
    icon="success"
    message="操作成功！"
    :showButton="false"
    :closeOnClickOverlay="true"
  />
</template>
```

### 自定义样式

```vue
<template>
  <DialogBox 
    v-model:show="showDialog"
    icon="error"
    iconSize="80rpx"
    message="网络连接失败"
    btnText="重试"
    @confirm="handleRetry"
  />
</template>
```

## 工具函数

组件提供了便捷的工具函数来快速创建不同类型的对话框：

```vue
<script setup>
import DialogBox from '@/components/DialogBox'
import { DialogUtils, createSuccessDialog } from '@/components/DialogBox/utils'

const dialogConfig = ref({})

// 使用工具类
const showSuccess = () => {
  dialogConfig.value = DialogUtils.success('操作成功！')
}

// 使用创建函数
const showInfo = () => {
  dialogConfig.value = createSuccessDialog('信息提示', {
    tip: '这是一个提示信息',
    showTip: true
  })
}
</script>

<template>
  <DialogBox v-bind="dialogConfig" />
</template>
```

### 可用的工具函数

- `DialogUtils.info(message, options?)` - 信息对话框
- `DialogUtils.success(message, options?)` - 成功对话框
- `DialogUtils.warning(message, options?)` - 警告对话框
- `DialogUtils.error(message, options?)` - 错误对话框

## 注意事项

1. 组件使用了 `v-model:show` 进行双向绑定
2. 消息内容支持换行符 `\n`
3. 图标名称需要符合 Wot Design Uni 的图标规范
4. 组件已适配 UnoCSS 原子类样式
5. 提供了 TypeScript 类型定义，支持完整的类型检查