useModal()

useModal() 提供命令式弹窗 API——在任意业务逻辑中直接 await 用户的操作结果，无需在模板里维护 v-model 状态。弹窗由布局层注册的 SwModalHost 负责渲染，业务代码无需关心 DOM 挂载位置。

前提： 需在 app.vue 或当前布局中放置一次 <SwModalHost />。由 sw create 生成的项目已内置，无需手动添加。

基础用法

加载中...

<script setup lang="ts">
const modal = useModal()

async function handleDelete() {
  const confirmed = await modal.open({
    title: '确认删除',
    description: '此操作不可撤销，确定要继续吗？',
    confirmText: '删除',
    cancelText: '取消',
  })
  if (confirmed) await deleteItem()
}
</script>

open() 返回 Promise<boolean>：用户点确认 resolve true，点取消或关闭 resolve false。

常用场景

加载中...

纯提示（隐藏取消按钮）

传空字符串给 cancelText 隐藏取消按钮：

await modal.open({
  title: '温馨提示',
  description: '活动已结束，感谢参与。',
  confirmText: '知道了',
  cancelText: '',
})

自定义按钮文字

const ok = await modal.open({
  title: '提交订单',
  description: `本次金额：¥${total}`,
  confirmText: '立即支付',
  cancelText: '再想想',
})

返回值

名称	类型	说明
`state`	`DeepReadonly<Ref<ModalState \| null>>`	当前弹窗状态（`null` 表示无弹窗，只读响应式）
`open`	`(options: ModalOptions) => Promise<boolean>`	打开弹窗，resolve 为用户是否点击确认
`close`	`(confirmed?: boolean) => void`	手动关闭弹窗，可传结果（默认 `false`）

ModalOptions 参数

参数	类型	说明
`title`	`string`	弹窗标题
`description`	`string`	弹窗描述文字
`confirmText`	`string`	确认按钮文字，默认 `"确认"`
`cancelText`	`string`	取消按钮文字，默认 `"取消"`；传 `''` 则隐藏按钮

注意事项

同一时刻只有一个命令式弹窗，多次调用 open() 会覆盖前一个
如需自定义内容复杂的弹窗（如表单），请改用声明式 <SwModal> + v-model:open
close() 可在业务代码中手动调用，默认传 false（等同用户点取消）