Vue.js全局弹窗组件应通过服务类实现单例响应式实例，状态集中管理、引用唯一、更新同步；封装dialogService.js，用ref/reactive管理状态，暴露open/close/destroy方法，支持Promise调用、动态组件挂载及容器复用；在main.ts中用Symbol唯一注入，适配非浏览器环境并提供销毁清理机制。
Vue.js 开发具备单例行为的全局弹窗组件，关键不是“禁止创建多个”，而是让所有调用都指向同一个响应式实例——状态集中、引用唯一、更新同步。
封装一个可复用的服务类
把弹窗逻辑抽离为独立服务（如 dialogService.js），用 ref 或 reactive 管理核心状态（visible、content、props 等），暴露 open()、close()、destroy() 方法：
-
open() 返回 Promise：支持
await dialogService.open({ title: '确认删除？' })，内部 resolve 控制后续流程 -
支持动态内容：接收任意组件选项（
{ component: ConfirmDialog, props: { ... } }），用createApp动态挂载 - 容器复用：首次 open 创建 DOM 容器并 append 到 body；close 仅隐藏不卸载；destroy 才彻底清理
在顶层一次性注入服务
在 main.js（或 main.ts）中创建唯一实例，并通过 app.provide 注入：
- 使用 Symbol 作为 key（如
const DIALOG_SERVICE = Symbol('dialogService')），避免字符串冲突 - 确保只调用一次
createDialogService()，不要在组件 setup 中重复 new 实例 - 注入后，任意深层组件只需
const { open } = inject(DIALOG_SERVICE)即可调用
处理环境与生命周期边界
服务内部必须适配非浏览器环境和多场景生命周期：
立即学习“前端免费学习笔记（深入）”；
-
DOM 检测：所有
document.createElement、appendChild等操作加if (typeof document !== 'undefined') -
挂载安全：动态创建的弹窗 App 必须手动挂载到
document.body，且需缓存容器引用防止重复添加 -
销毁可控：提供
destroyAll()清理残留 DOM 和事件监听，尤其在路由切换或测试 teardown 时调用
与状态管理协同（可选但推荐）
若项目已用 Pinia，可将弹窗服务改造成 store：
- 状态（
visible、currentDialog）放于defineStore中，天然响应式 - 动作方法（
open、close）内联逻辑，同时触发 UI 更新和副作用（如遮罩层、滚动锁定） - 仍可通过
provide/inject注入 store 实例，保持调用方式一致，兼顾组合式 API 与集中状态管理
