bandhuBuy-uniapp/src/components/DialogBox/README.md

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	对话框关闭事件	-

使用示例

基础用法

<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>

带提示信息

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

仅显示消息（无按钮）

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

自定义样式

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

工具函数

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

<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 类型定义，支持完整的类型检查