组合式 API 弹窗服务核心是解耦状态与 UI、脱离模板依赖、支持跨组件调用，通过定义 open/close/register 接口、创建全局状态管理器、实现通用 ModalContainer 容器及可复用弹窗组件，使弹窗成为可注入、可编程的服务。

用组合式 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，用 渲染任意注册组件
• 提供默认布局：遮罩层、居中卡片、过渡动画（用 封装）
• 暴露插槽给子组件控制底部按钮（如 ），或通过 props 透传 action 按钮配置

4. 构建可复用的弹窗组件（Confirm、FormModal、LoadingTip）

这些组件不管理自身显隐，只专注内容和交互：

• 接收 onConfirm、onCancel 等回调 props（由 ModalContainer 注入），点击后调用对应函数即可关闭并返回结果
• 支持 setup 语法糖 + defineEmits，例如：const emit = defineEmits(['confirm', 'cancel'])
• 表单类弹窗可结合 useForm 组合式函数，提交成功后调用 emit('confirm', formData)，自动 resolve Promise

这种设计让弹窗真正成为“服务”：可以在 setup 中直接 const result = await modal.open({ component: Confirm, title: '删除？' })，也可以在 pinia action、路由守卫甚至错误拦截器里调用，无需父子传 ref、不依赖 context、不污染组件树。本质上是把 UI 副作用封装进响应式系统，让调用方保持纯粹逻辑。

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！