气泡确认框 PopConfirm

专门用于确认操作的气泡卡片。

何时使用

• 需要用户确认某个重要操作时
• 删除、提交等不可逆操作前的确认
• 不想打断用户主要流程但又需要确认操作时

示例

基础用法

最简单的确认框用法。

自定义按钮文字

可以自定义确认框中的按钮文字。

自定义按钮样式

可以自定义确认框中按钮的样式。

搭配链接

确认框也可以与链接搭配使用。

多个 PopConfirm（互斥）

同一时间只能显示一个 PopConfirm，点击新的会关闭旧的。

API

PopoverConfirm Props

参数	说明	类型	默认值
title	标题	ReactNode	-
content	内容	ReactNode	-
cancelText	取消按钮文字	string	'取消'
confirmText	确定按钮文字	string	'确定'
cancelVariant	取消按钮变种	ButtonVariant	'default'
confirmVariant	确定按钮变种	ButtonVariant	'primary'
onCancel	取消回调	() => void	-
onConfirm	确定回调	() => void	-
children	触发元素	ReactElement	-
className	自定义类名	string	-

注意事项

1. PopoverConfirm 是通过 Portal 渲染到 body 上的，确保层级高于其他元素
2. 同一时间只能显示一个 PopoverConfirm，点击新的会自动关闭旧的
3. 点击外部区域或取消按钮会关闭 PopoverConfirm
4. PopoverConfirm 会自动计算位置，确保完全显示在视口内
5. 当窗口大小改变或滚动时，PopoverConfirm 会重新计算位置
6. PopoverConfirm 专门用于确认操作，提供了取消和确定两个按钮