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

代码演示

如何引入

基本使用

类型搭配

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

延时关闭

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

搭配 Tooltip 或 Popover 使用

请参考搭配使用

API 参考

属性说明类型默认值版本
arrowPointAtCenter“小三角”是否指向元素中心,需要同时传入"showArrow=true"booleanfalse0.34.0
cancelText取消按钮文字string"取消"
cancelButtonProps取消按钮的 propsobject0.29.0
cancelType取消按钮类型string"tertiary"
content显示的内容string|ReactNode
defaultVisible气泡框默认是否展示boolean0.19.0
disabled点击 Popconfirm 子元素是否弹出气泡确认框booleanfalse
getPopupContainer指定父级 DOM,弹层将会渲染至该 DOM 中,自定义时容器需要设置 position: relativeFunction():HTMLElement() => document.body
icon自定义弹出气泡 Icon 图标ReactNode
motion下拉列表出现/隐藏时,是否有动画booleantrue
okText确认按钮文字string"确认"
okType确认按钮类型string"primary"
okButtonProps确认按钮的 propsobject0.29.0
position方向,可选值:top,topLeft,topRight,left,leftTop,leftBottom,
right,rightTop,rightBottom,bottom,bottomLeft,bottomRight
string"bottomLeft"
showArrow是否显示箭头三角形booleanfalse
stopPropagation是否阻止弹层上的点击事件冒泡booleantrue0.34.0
title显示的标题string|ReactNode
trigger触发展示的时机,可选值:hover / focus / click / customstring'click'
visible气泡框是否展示的受控属性boolean0.19.0
zIndex浮层 z-index 值number1030
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版本修复了这个问题。