Modal

modal

命令式对话框 · confirm/info/success/error/warning 函数式 API + Dialog 引擎

用法

确认对话框

modal.confirm 命令式弹窗，带取消 / 确定双键（需页面挂一个 <ModalProvider />）。

tsx

modal.confirm({
  title: "确认删除该记录？",
  content: "删除后无法恢复。",
  onOk: () => {
    // 执行删除
  },
})

信息提示类型

info / success / error / warning 派生不同图标与主色，仅渲染单个确定键。

tsx

<>
  <Button onClick={() => modal.info({ title: "系统提示", content: "新版本已发布。" })}>info</Button>
  <Button onClick={() => modal.success({ title: "操作成功", content: "数据已保存。" })}>success</Button>
  <Button onClick={() => modal.error({ title: "操作失败", content: "网络异常，请稍后重试。" })}>error</Button>
  <Button onClick={() => modal.warning({ title: "注意", content: "当前空间即将用尽。" })}>warning</Button>
</>

异步确定（loading）

onOk 返回 Promise 时确定键进 loading；resolve 自动关闭，reject 保持打开。

tsx

modal.confirm({
  title: "提交订单？",
  content: "点确定将发起一次请求。",
  onOk: () => new Promise((resolve) => setTimeout(resolve, 1200)),
})

自定义按钮文案

okText / cancelText 覆盖默认「确定 / 取消」。

tsx

modal.confirm({
  title: "退出登录？",
  content: "退出后需重新登录。",
  okText: "退出",
  cancelText: "再想想",
  onOk: () => {},
})

何时用

逻辑流程里需要一行代码弹确认/提示（删除确认、操作结果反馈）时用，无需在 JSX 里铺 Trigger/Content。需要复杂自定义内容 / 表单的声明式弹窗用 Dialog；强制决策的破坏性确认用 AlertDialog。

导入

import { modal, ModalProvider, hulianModalManager } from "@hulianui/ui"

API / Options

调用入口：modal.confirm(opts) / modal.info / modal.success / modal.error / modal.warning，返回 ModalInstance。语调由入口隐含。ModalProvider 需在应用根挂一次（同 Toast 范式）。

ModalOptions Props：

名称	类型	默认	说明
`type`	`"confirm" \| "info" \| "success" \| "error" \| "warning"`	—	语调；命令式入口已隐含，一般无需显式传

ModalOptions Events：

事件	类型	说明
`onOk`	`() => void \| Promise<unknown>`	点确定回调；返回 Promise 时确定键进 loading，resolve → 自动关闭，reject → 保持打开
`onCancel`	`() => void`	点取消 / Esc / 点遮罩关闭时回调

ModalOptions Slots：

插槽	类型	说明
`title`	`ReactNode`	标题（加粗主行）
`content`	`ReactNode`	正文内容
`okText`	`ReactNode`	确定按钮文案，默认 `"确定"`
`cancelText`	`ReactNode`	取消按钮文案，默认 `"取消"`（仅 confirm 渲染取消键）

ModalInstance：destroy() 立即关闭销毁；update(next) 更新已打开对话框配置。

禁忌 / 坑

必须在应用根挂一次 ModalProvider，否则命令式调用无处渲染；showcase 里也是 layout 单挂、触发按钮里只调 modal.*（同 Toast）。
onOk 返回 Promise 时：resolve 才自动关闭，reject 会保持打开（由调用方提示错误）——别在 reject 分支里又手动 destroy。

Playground

类型标题内容确定文案

modal.confirm({
  title: "确认删除？",
  content: "此操作不可撤销，请谨慎操作。",
  okText: "确定",
  onOk: () => {},
})

用法

确认对话框

modal.confirm 命令式弹窗，带取消 / 确定双键（需页面挂一个 <ModalProvider />）。

tsx

modal.confirm({
  title: "确认删除该记录？",
  content: "删除后无法恢复。",
  onOk: () => {
    // 执行删除
  },
})

信息提示类型

info / success / error / warning 派生不同图标与主色，仅渲染单个确定键。

tsx

<>
  <Button onClick={() => modal.info({ title: "系统提示", content: "新版本已发布。" })}>info</Button>
  <Button onClick={() => modal.success({ title: "操作成功", content: "数据已保存。" })}>success</Button>
  <Button onClick={() => modal.error({ title: "操作失败", content: "网络异常，请稍后重试。" })}>error</Button>
  <Button onClick={() => modal.warning({ title: "注意", content: "当前空间即将用尽。" })}>warning</Button>
</>

异步确定（loading）

onOk 返回 Promise 时确定键进 loading；resolve 自动关闭，reject 保持打开。

tsx

modal.confirm({
  title: "提交订单？",
  content: "点确定将发起一次请求。",
  onOk: () => new Promise((resolve) => setTimeout(resolve, 1200)),
})

自定义按钮文案

okText / cancelText 覆盖默认「确定 / 取消」。

tsx

modal.confirm({
  title: "退出登录？",
  content: "退出后需重新登录。",
  okText: "退出",
  cancelText: "再想想",
  onOk: () => {},
})

API / Options

ModalOptions Props：

名称	类型	默认	说明
`type`	`"confirm" \| "info" \| "success" \| "error" \| "warning"`	—	语调；命令式入口已隐含，一般无需显式传

ModalOptions Events：

事件	类型	说明
`onOk`	`() => void \| Promise<unknown>`	点确定回调；返回 Promise 时确定键进 loading，resolve → 自动关闭，reject → 保持打开
`onCancel`	`() => void`	点取消 / Esc / 点遮罩关闭时回调

ModalOptions Slots：

插槽	类型	说明
`title`	`ReactNode`	标题（加粗主行）
`content`	`ReactNode`	正文内容
`okText`	`ReactNode`	确定按钮文案，默认 `"确定"`
`cancelText`	`ReactNode`	取消按钮文案，默认 `"取消"`（仅 confirm 渲染取消键）

ModalInstance：destroy() 立即关闭销毁；update(next) 更新已打开对话框配置。

禁忌 / 坑

必须在应用根挂一次 ModalProvider，否则命令式调用无处渲染；showcase 里也是 layout 单挂、触发按钮里只调 modal.*（同 Toast）。

onOk 返回 Promise 时：resolve 才自动关闭，reject 会保持打开（由调用方提示错误）——别在 reject 分支里又手动 destroy。

Modal

用法

确认对话框

信息提示类型

异步确定（loading）

自定义按钮文案

何时用

导入

API / Options

禁忌 / 坑

相关

Playground

Modal

用法

确认对话框

信息提示类型

异步确定（loading）

自定义按钮文案

何时用

导入

API / Options

禁忌 / 坑

相关

Playground