更新记录

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

1.0.0

• 新增全局弹窗组件 qq-global-dialog
• 支持 Vue2 / Vue3 项目使用
• 支持 App、小程序、H5 多端使用
• 支持 confirm 确认弹窗
• 支持 alert 成功提示和失败提示
• 支持自定义 confirm 标题、内容、确认按钮文案、取消按钮文案
• 支持 confirm 确认回调和取消回调
• 支持 alert 自动关闭及关闭后回调
• 新增顶部插图和成功/失败图标资源
• 新增 USAGE.md 使用示例文档
• 首页增加 confirm、成功 alert、失败 alert 演示

平台兼容性

uni-app(3.7.9)

GlobalDialog 使用示例

一个适用于 uni-app 的全局弹窗组件，支持 Vue2 / Vue3、App、小程序、H5，提供 confirm 确认弹窗和 alert 成功/失败提示。

如需 uni-app x 项目弹窗，请参考：https://ext.dcloud.net.cn/plugin?id=28237

图片资源说明

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

引入组件

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

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

<script>
    import globalDialog from '@/components/qq-vueglobal-dialog/globalDialog.vue'

    export default {
        components: {
            globalDialog
        }
    }
</script>

confirm 用法

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

参数顺序：

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

示例：

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

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

this.$refs.globalDialog.confirm(
    '提示',
    '操作已完成',
    () => {},
    () => {},
    '知道了',
    ''
)

alert 用法

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

参数顺序：

alert(content, onConfirm, isErr)

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

成功提示：

this.$refs.globalDialog.alert('提交成功', () => {}, false)

失败提示：

this.$refs.globalDialog.alert('提交失败', () => {}, true)

完整页面示例

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