一个基于 Wot Design Uni 的通用对话框组件,支持自定义图标、消息、按钮等。
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 | 点击遮罩是否关闭 |
事件名 | 说明 | 回调参数 |
---|---|---|
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?)
- 错误对话框v-model:show
进行双向绑定\n