Popconfirm 气泡确认框
Popconfirm 适合承载“轻量但不能误触”的操作确认。Rue 实现采用当前卡片与按钮体系, 同时提供了和成熟组件库一致的核心心智:受控开合、异步确认、危险操作语义、单按钮确认、 多触发方式与角落定位。
Decision Layer
先确认,再执行
比 Tooltip 更明确,比 Modal 更轻,不会把整个页面打断。
Controlled Flow
可以挂到外部状态机
open 和 onOpenChange 让它适合审批、表单、工具栏联动。
Async Confirm
确认按钮会自动 loading
返回 Promise 后保持浮层可见,适合删除、发布、同步等异步操作。
# 基础确认与危险操作
覆盖默认双按钮、危险确认和单按钮确认,涵盖最常见的确认交互。
# 受控开合与外部联动
适合把确认层并入审批工具栏、批量操作条或外部状态机。
当前状态
Closed
openChange 次数
0
已确认次数
0
# 异步确认与自动 loading
onConfirm 返回 Promise 后,确认按钮会保持 loading,直到异步流程完成再关闭。
当前状态:等待发布 · 触发次数:0
# 触发方式
除了默认 click,还可以接 focus、contextMenu,或把多个触发手势组合使用。
等待触发
未触发
打开次数:0
# 定位与箭头
支持常见角落别名,便于和 Popover、Tooltip 保持一致的浮层布局心智。
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title / description / icon | 确认层的主要文案与图标;支持字符串、JSX 或函数返回节点。 | any | - / - / 内置告警图标 |
open / defaultOpen / onOpenChange | 支持受控与非受控开合,适合把确认步骤挂到外部流程或状态机。 | boolean / boolean / (open: boolean) => void | false / false / - |
onConfirm / onCancel | 确认与取消回调;当 onConfirm 返回 Promise 时,会自动进入确认按钮 loading。 | (event?) => void | boolean | Promise<unknown> / (event?) => void | - / - |
okText / cancelText / showCancel / okType | 控制操作文案、是否显示取消按钮,以及确认按钮视觉语义。 | any / any / boolean / PopconfirmOkType | 确认 / 取消 / true / primary |
okButtonProps / cancelButtonProps | 进一步定制按钮尺寸、危险态、图标、loading 图标和自定义 className。 | PopconfirmButtonProps | - |
trigger / placement / arrow | 支持 click、focus、hover、contextMenu,以及常见四边和角落定位、箭头居中。 | PopconfirmTrigger | PopconfirmTrigger[] / PopconfirmPlacement / boolean | { pointAtCenter?: boolean } | click / top / true |
overlayClassName / overlayStyle / classNames / styles | 浮层容器与语义分区样式扩展,适合在设计页或业务皮肤里细调。 | string / Record<string, any> / PopconfirmClassNames / PopconfirmStyles | - |
disabled / onPopupClick | 禁用确认层,或在面板内部点击时接收事件,便于埋点和联动。 | boolean / (event: MouseEvent) => void | false / - |