Popconfirm气泡确认框

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

何时使用#

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

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

import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';

代码演示

最简单的用法。

expand codeexpand code
加载中

位置有十二个方向。

expand codeexpand code
加载中

使用 nzIcon 自定义提示图标。

expand codeexpand code
加载中

使用 okTextcancelText 自定义按钮文字。

expand codeexpand code
加载中
Delete a task

Whether directly execute:

可以判断是否需要弹出。

expand codeexpand code
加载中

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

expand codeexpand code
加载中

API#

[nz-popconfirm]#

参数说明类型默认值
[nzPopconfirmArrowPointAtCenter]箭头指向锚点的中心booleanfalse
[nzPopconfirmTitle]确认框的描述string | TemplateRef<void>-
[nzPopconfirmTrigger]触发行为,为 null 时不响应光标事件'click' | 'focus' | 'hover' | null'hover'
[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]取消按钮文字string'取消'-
[nzOkText]确认按钮文字string'确定'-
[nzOkType]确认按钮类型'primary' | 'ghost' | 'dashed' | 'danger' | 'default''primary'-
[nzOkDanger]确认按钮是否为危险按钮。nz-buttonnzDanger 值保持一致booleanfalse-
[nzCondition]是否直接触发 nzOnConfirm 而不弹出框booleanfalse-
[nzIcon]自定义弹出框的 iconstring | TemplateRef<void>--
[nzAutoFocus]按钮的自动聚焦null | 'ok' | 'cancel'null
(nzOnCancel)点击取消的回调EventEmitter<void>--
(nzOnConfirm)点击确认的回调EventEmitter<void>--

更多属性请参考 Tooltip

注意#

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