更新记录

1.0.0（2026-06-05） 下载此版本

1.0.0

• 新增全局弹窗组件 globalDialog
• 支持 confirm 确认弹窗
• 支持 alert 成功提示和失败提示
• 支持自定义 confirm 标题、内容、确认按钮文案、取消按钮文案
• 支持 confirm 确认回调和取消回调
• 支持 alert 自动关闭及关闭后回调
• 新增透明背景顶部插图，优化弹窗展示效果
• 新增 USAGE.md 使用示例文档
• 首页增加 confirm、成功 alert、失败 alert 演示

平台兼容性

uni-app x(4.71)

其他

GlobalDialog 使用示例

一个适用于 uni-app x / uvue 的全局弹窗组件，支持确认弹窗 confirm 和轻提示弹窗 alert。

图片资源说明

组件示例中使用了顶部插图和成功/失败图标。如果需要完整图片效果，请使用 HBuilderX 导入示例项目，确保 static 目录下的图片资源一并导入。

引入组件

在页面中引入并放置组件：

<template>
    <view>
        <globalDialog ref="globalDialogRef"></globalDialog>
    </view>
</template>

<script setup>
    import globalDialog from '@/components/dialog/globalDialog.uvue'

    const globalDialogRef = ref<ComponentPublicInstance | null>(null)
</script>

confirm 用法

confirm 适合需要用户确认或取消的场景。

参数顺序：

confirm(title, content, onConfirm, onCancel, confirmText, cancelText)

示例：

function showConfirm() {
    if (globalDialogRef.value == null) return

    globalDialogRef.value!.$callMethod(
        'confirm',
        '温馨提示',
        '确定要提交当前内容吗？',
        () => {
            uni.showToast({ title: '已确认', icon: 'none' })
        },
        () => {
            uni.showToast({ title: '已取消', icon: 'none' })
        },
        '确定',
        '取消'
    )
}

如果不需要取消按钮，可以把 cancelText 传空字符串：

globalDialogRef.value!.$callMethod(
    'confirm',
    '提示',
    '操作已完成',
    () => {},
    () => {},
    '知道了',
    ''
)

alert 用法

alert 适合成功、失败等短提示，会自动关闭。

参数顺序：

alert(content, onConfirm, isErr)

isErr 为 false 时显示成功样式，为 true 时显示失败样式。

成功提示：

function showSuccessAlert() {
    if (globalDialogRef.value == null) return

    globalDialogRef.value!.$callMethod(
        'alert',
        '提交成功',
        () => {
            console.log('success alert closed')
        },
        false
    )
}

失败提示：

function showErrorAlert() {
    if (globalDialogRef.value == null) return

    globalDialogRef.value!.$callMethod(
        'alert',
        '提交失败',
        () => {
            console.log('error alert closed')
        },
        true
    )
}

完整页面示例

项目首页 pages/index/index.uvue 已包含 confirm、成功 alert、失败 alert 的完整演示，可以直接运行查看效果。