更新记录

1.0.1（2026-06-22）

1.0.1

• 初始版本
• 全局 Dialog 组件（alert / confirm）
• Toast 组件（success / fail / message）
• Loading 组件（dots / spinner，支持自定义 logo）
• useDialog 组合式 API（自动清理）
• 局部 Dialog 组件（props + 插槽）
• 支持 APP（Vue）、H5、主流小程序

平台兼容性

uni-app(4.83)

True Global Dialog

1.99 交个朋友，买一个省心。

真正的全局弹窗方案，适用于 uni-app（Vue 3）。一套代码，全端通用，写最少的代码，做最多的弹窗。

为什么你需要这个组件？

做过 uni-app 的人都知道，弹窗是个「小事情、大麻烦」的东西：

原生 uni.showModal 所有端的样式都不一样，无法自定义。

自己写全局弹窗——你需要：写组件 → 挂到每个页面 → 封装调用函数 → 处理事件通信 → 清理残留状态。每个项目重复一遍。

在 store / 工具函数中调用弹窗？——普通组件做不到，你得想办法把组件实例传进去，或者用一些不太优雅的 workaround。

这个组件解决的就是这些事情：

• 在 store 里直接 await showLoading('加载中')，不用传任何实例
• 在页面里 await confirm('确认删除？')，拿到结果继续执行
• 不用在每个页面里手动引入组件
• 编译时自动帮你搞定一切，你只管写业务代码

它能做什么

安装

1. 复制插件

把插件复制到你项目的 uni_modules/ 目录下。

2. 配置 Vite 插件

把 vite-plugin-auto-dialog.ts 复制到 plugins/ 目录，然后在 vite.config.ts 中注册：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import autoDialogPlugin from './plugins/vite-plugin-auto-dialog'

export default defineConfig({
  plugins: [
    autoDialogPlugin(),  // 放在 uni() 前面
    uni()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

就这么简单。 不用在页面里手动引入组件。编译时会自动处理。

3. 开始用

直接在页面里写：

const { alert, confirm, success, showLoading, hideLoading } = useDialog()

快速体验

<script setup lang="ts">
import { useDialog } from '@/uni_modules/true-global-dialog/composables/useDialog'

const { alert, confirm, success, fail, showLoading, hideLoading } = useDialog()

// 提示
const handleAlert = async () => {
  await alert({ content: '操作成功' })
  // 用户点确认后才会继续
}

// 确认
const handleConfirm = async () => {
  const ok = await confirm({ content: '确定要删除吗？' })
  if (ok) {
    await success('已删除')
  }
}

// Loading
const handleLoading = () => {
  showLoading('加载中...')
  setTimeout(() => hideLoading(), 3000)
}
</script>

在 store 或工具函数中也一样直接：

import { showLoading, hideLoading, showSuccess } from '@/uni_modules/true-global-dialog/utils/dialog'

async function submitForm() {
  showLoading('提交中...')
  const res = await api.submit(data)
  hideLoading()
  await showSuccess('提交成功')
}

组件列表

版本与定价

写一次，所有项目都能用。省下的时间，远不止这个价。

后续维护

这个组件会持续维护。如果你在使用过程中遇到问题或者有功能建议，随时联系我。

许可证

MIT