Popconfirm气泡确认框

点击元素,弹出气泡式的确认框。
使用

何时使用#

目标元素的操作需要用户进一步的确认时,在目标元素附近弹出浮层提示,询问用户。

confirm 弹出的全屏居中模态对话框相比,交互形式更轻量。

代码演示

最简单的用法。

      加载中
    

位置有十二个方向。

      加载中
    

使用 nzIcon 自定义提示图标。

      加载中
    

点击确定后异步关闭 Popconfirm,例如提交表单。

      加载中
    

使用 okTextcancelText 自定义按钮文字。

      加载中
    
Delete a task

Whether directly execute:

可以判断是否需要弹出。

      加载中
    

设置 [nzPopconfirmShowArrow]="false" 隐藏箭头。

      加载中
    

点击确定后异步关闭 Popconfirm,例如提交表单。

      加载中
    

API#

[nz-popconfirm]#

参数说明类型默认值
[nzPopconfirmArrowPointAtCenter]箭头指向锚点的中心booleanfalse
[nzPopconfirmTitle]确认框的描述string | TemplateRef<void>-
[nzPopconfirmTitleContext]确认框描述的上下文object-
[nzPopconfirmTrigger]触发行为,为 null 时不响应光标事件'click' | 'focus' | 'hover' | null'click'
[nzPopconfirmPlacement]气泡框位置'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | Array<string>'top'
[nzPopconfirmOrigin]气泡框定位元素ElementRef-
[nzPopconfirmVisible]显示隐藏气泡框booleanfalse
[nzPopconfirmShowArrow]气泡框是否包含箭头booleantrue
[nzPopconfirmPlacement]确认框位置'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom''top'
[nzPopconfirmOrigin]确认框定位元素ElementRef-
[nzPopconfirmVisible]显示隐藏确认框booleanfalse
(nzPopconfirmVisibleChange)显示隐藏的事件EventEmitter<boolean>-
[nzPopconfirmMouseEnterDelay]鼠标移入后延时多少才显示确认框,单位:秒number0.15
[nzPopconfirmMouseLeaveDelay]鼠标移出后延时多少才隐藏确认框,单位:秒number0.1
[nzPopconfirmOverlayClassName]卡片类名string-
[nzPopconfirmOverlayStyle]卡片样式object-
[nzPopconfirmBackdrop]浮层是否应带有背景板booleanfalse
参数说明类型默认值全局配置
[nzCancelText]取消按钮文字 (已弃用,请使用 nzCancelButtonProps 代替)string'取消'-
[nzOkText]确认按钮文字 (已弃用,请使用 nzOkButtonProps 代替)string'确定'-
[nzOkType]确认按钮类型 (已弃用,请使用 nzOkButtonProps 代替)'primary' | 'ghost' | 'dashed' | 'default''primary'-
[nzOkDanger]确认按钮是否为危险按钮。nz-buttonnzDanger 值保持一致(已弃用,请使用 nzOkButtonProps 代替)booleanfalse-
[nzOkDisabled]禁止与确认按钮交互。nz-buttondisabled 值保持一致(已弃用,请使用 nzOkButtonProps 代替)booleanfalse-
[nzOkButtonProps]确定按钮的配置对象NzPopConfirmButtonPropsnull-
[nzCancelButtonProps]取消按钮的配置对象NzPopConfirmButtonPropsnull-
[nzCondition]是否直接触发 nzOnConfirm 而不弹出框booleanfalse-
[nzIcon]自定义弹出框的 iconstring | TemplateRef<void> | null--
[nzAutoFocus]按钮的自动聚焦null | 'ok' | 'cancel'null
[nzBeforeConfirm]确认操作之前的钩子,决定是否继续响应 nzOnConfirm 回调,支持异步验证。(() => Observable<boolean> | Promise<boolean> | boolean) | nullnull-
(nzOnCancel)点击取消的回调EventEmitter<void>--
(nzOnConfirm)点击确认的回调EventEmitter<void>--

更多属性请参考 Tooltip

注意#

请确保 [nz-popconfirm] 元素能接受 onMouseEnteronMouseLeaveonFocusonClick 事件。