Popconfirm气泡确认框

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

何时使用#

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

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

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

代码演示

最简单的用法。

expand codeexpand code
加载中

位置有十二个方向。

expand codeexpand code
加载中

使用 nzIcon 自定义提示图标。

expand codeexpand code
加载中

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

expand codeexpand code
加载中

使用 okTextcancelText 自定义按钮文字。

expand codeexpand code
加载中
Delete a task

Whether directly execute:

可以判断是否需要弹出。

expand codeexpand code
加载中

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

expand codeexpand code
加载中

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

expand codeexpand code
加载中

API#

[nz-popconfirm]#

参数说明类型默认值
[nzPopconfirmArrowPointAtCenter]箭头指向锚点的中心booleanfalse
[nzPopconfirmTitle]确认框的描述string | TemplateRef<void>-
[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]取消按钮文字string'取消'-
[nzOkText]确认按钮文字string'确定'-
[nzOkType]确认按钮类型'primary' | 'ghost' | 'dashed' | 'default''primary'-
[nzOkDanger]确认按钮是否为危险按钮。nz-buttonnzDanger 值保持一致booleanfalse-
[nzCondition]是否直接触发 nzOnConfirm 而不弹出框booleanfalse-
[nzIcon]自定义弹出框的 iconstring | TemplateRef<void>--
[nzAutoFocus]按钮的自动聚焦null | 'ok' | 'cancel'null
[nzBeforeConfirm]确认操作之前的钩子,决定是否继续响应 nzOnConfirm 回调,支持异步验证。(() => Observable<boolean> | Promise<boolean> | boolean) | nullnull-
(nzOnCancel)点击取消的回调EventEmitter<void>--
(nzOnConfirm)点击确认的回调EventEmitter<void>--

更多属性请参考 Tooltip

注意#

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