README.md 3.3 KB

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