Composition API 中实现弹窗控制的核心是封装可复用的组合函数：useDialog 管理显隐与事件，useModalStack 支持多实例栈式管理，通过事件解耦 UI 库，提供 useConfirm/useMessage 等语义化快捷函数，并支持泛型类型推导。
在 Composition API 中实现可复用的弹窗与对话框控制逻辑，核心是把“显隐状态 + 打开/关闭行为 + 可选参数传递”封装成独立的、可导入的组合函数（composable），避免在每个组件中重复定义 visible、open()、close() 和 toggle()。
封装基础控制逻辑（useDialog）
创建一个通用的 useDialog 组合函数，返回响应式状态和操作方法：
- 用
ref(false)管理显隐状态，支持默认值和外部初始控制 - 提供
open(payload?)接收可选数据（如标题、内容、确认回调），并触发显示 -
close()清空临时数据并隐藏，confirm()和cancel()可按需触发对应回调 - 支持通过
onBeforeOpen/onAfterClose注册副作用钩子（比如请求数据、重置表单）
支持多实例与上下文隔离（useModalStack）
当应用需要同时管理多个弹窗（如嵌套提示、权限弹窗叠加），直接用单一 ref 会冲突。可升级为栈式管理：
- 内部维护一个响应式数组
stack，每项含id、props、resolve/reject（用于 Promise 式调用） -
openModal({ component, props })推入栈顶并返回 Promise，closeTop()解析并弹出 - 配合
v-if="stack.length"控制全局模态容器渲染，每个弹窗组件通过provide/inject获取当前上下文
与具体 UI 库解耦（适配 Element Plus / Ant Design Vue / Naive UI）
不要在组合函数里硬编码组件名或属性。推荐两种方式：
- 对外暴露标准事件（
onConfirm,onCancel,onOpen），由父组件绑定到具体 UI 组件的对应事件上 - 接收
renderer函数，让调用方决定如何渲染 —— 比如传入() => h(ElDialog, { ... }, { default: () => [...] }) - 示例：调用
const { visible, open, close } = useDialog();后，在模板中写<el-dialog v-model="visible" @closed="close">即可，不侵入逻辑
增强实用性：支持快捷调用与类型推导
对高频场景（如确认框、提示消息）提供语义化快捷函数：
-
useConfirm()返回confirm(message, options?)，内部自动处理 Promise resolve/reject -
useMessage()封装轻量提示（非模态），支持 duration、icon、onClose 回调 - TypeScript 下为 payload、options 提供泛型参数，例如
useDialog<UserFormPayload>()，确保open()传参类型安全
