组合式API打造全新弹窗服务方案

本文提出了一种基于 Vue 组合式 API 的弹窗服务新范式，彻底摆脱传统 v-if 控制显隐的模板依赖，通过抽象 open/close/register 接口、构建全局响应式状态管理器、设计通用 ModalContainer 容器及专注业务逻辑的可复用弹窗组件，将弹窗升级为类似 message.success() 那样可注入、可编程、跨组件调用的服务——开发者只需 await modal.open(...) 即可获得用户操作结果，真正实现 UI 与逻辑解耦、副作用封装、高内聚低耦合，大幅提升复杂场景下的开发效率与可维护性。

用组合式 API 实现弹窗服务，核心在于脱离模板依赖、解耦状态与 UI、支持跨组件调用。它不是写一个 组件再 v-if 控制显隐，而是把“打开弹窗”变成一个可注入、可复用、可编程的函数调用 —— 类似 message.success() 那样的体验。

1. 定义弹窗服务接口（不绑定 DOM）

先抽象能力，不关心怎么渲染，只约定行为：

• open(options)：接收配置（标题、内容、按钮文案、是否可关闭等），返回 Promise，resolve 时携带用户操作结果（如点击了“确定”还是“取消”）
• close()：手动关闭当前弹窗（用于超时、全局取消等场景）
• register(component)：允许动态注册任意 Vue 组件作为弹窗内容（支持自定义表单、确认框、加载中提示等）

2. 创建全局状态管理器（useModalStore）

用 createPinia 或纯响应式对象封装弹窗生命周期：

• 用 ref 管理当前弹窗实例（currentModal）、是否显示（visible）、传入的 props 和 resolve/reject 函数
• 每次 open() 时生成唯一 ID，保存 resolve 回调，让弹窗组件内部能主动触发完成逻辑
• 关闭时清空状态，并调用上一次挂起的 resolve 或 reject（例如用户点击遮罩层关闭 → reject({ type: 'cancel' })）

3. 实现弹窗容器组件（ModalContainer）

这是唯一需要挂载到 DOM 的组件，但它是通用的、无业务逻辑的壳：

• 监听 visible 和 currentModal，用 渲染任意注册组件
• 提供默认布局：遮罩层、居中卡片、过渡动画（用 封装）
• 暴露插槽给子组件控制底部按钮（如