Popconfirm 气泡确认框

反馈类 · Popconfirm

气泡确认框

目标元素的操作需要用户进一步的确认时使用。与 Popover 相比它内置了一系列可配置的操作按钮，与 Modal 相比它不强制全屏居中显示，交互也更轻量

代码演示

如何引入

基本使用

类型搭配

开发者可以基于场景使用 okType/cancelType/icon 等参数搭配出不同风格的气泡式确认框。

延时关闭

onOk、onCancel 可以通过 return Promise 实现点击后延时关闭（v2.19后支持）。 onCancel、onOk 被触发时，对应的 Button 会自动切换为 loading: true
promise solve 会关闭气泡确认框， promise reject时气泡依然保留，同时 button loading 自动切换为 false

请参考搭配使用

API 参考

属性	说明	类型	默认值	版本
arrowPointAtCenter	“小三角”是否指向元素中心，需要同时传入"showArrow=true"	boolean	false	0.34.0
cancelText	取消按钮文字	string	"取消"
cancelButtonProps	取消按钮的 props	object		0.29.0
cancelType	取消按钮类型	string	"tertiary"
content	显示的内容	string\|ReactNode
defaultVisible	气泡框默认是否展示	boolean		0.19.0
disabled	点击 Popconfirm 子元素是否弹出气泡确认框	boolean	false
getPopupContainer	指定父级 DOM，弹层将会渲染至该 DOM 中，自定义时容器需要设置 `position: relative`	Function():HTMLElement	() => document.body
icon	自定义弹出气泡 Icon 图标	ReactNode
motion	下拉列表出现/隐藏时，是否有动画	boolean	true
okText	确认按钮文字	string	"确认"
okType	确认按钮类型	string	"primary"
okButtonProps	确认按钮的 props	object		0.29.0
position	方向，可选值：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`, `right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight`	string	"bottomLeft"
showArrow	是否显示箭头三角形	boolean	false
stopPropagation	是否阻止弹层上的点击事件冒泡	boolean	true	0.34.0
title	显示的标题	string\|ReactNode
trigger	触发展示的时机，可选值：hover / focus / click / custom	string	'click'
visible	气泡框是否展示的受控属性	boolean		0.19.0
zIndex	浮层 z-index 值	number	1030
onConfirm	点击确认按钮回调, Promise类型于 v 2.19后支持	Function(e): void \| Promise
onCancel	点击取消按钮回调，Promise类型于 v 2.19后支持	Function(e): void \| Promise
onClickOutSide	当弹出层处于展示状态，点击非Children、非浮层内部区域时的回调	Function(e)	2.1.0
onVisibleChange	气泡框切换显示隐藏的回调	Function(visible: boolean): void	() => {}	0.19.0

设计变量

FAQ

为什么 Popconfirm 浮层在靠近屏幕边界宽度不够时，丢失宽度意外换行?
在 chromium 104 后对于屏幕边界文本宽度不够时的换行渲染策略发生变化，详细原因可查看 issue #1022，semi侧已经在v2.17.0版本修复了这个问题。