Popconfirm气泡确认框

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

何时使用

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

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

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

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

代码演示

Popconfirm气泡确认框 - 图1

基本

最简单的用法。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  4. @Component({
  5.   selector: 'nz-demo-popconfirm-basic',
  6.   template: `
  7.     <a
  8.       nz-popconfirm
  9.       nzPopconfirmTitle="Are you sure delete this task?"
  10.       nzPopconfirmPlacement="bottom"
  11.       (nzOnConfirm)="confirm()"
  12.       (nzOnCancel)="cancel()"
  13.       >Delete</a
  14.     >
  15.   `
  16. })
  17. export class NzDemoPopconfirmBasicComponent {
  18.   cancel(): void {
  19.     this.nzMessageService.info('click cancel');
  20.   }
  22.   confirm(): void {
  23.     this.nzMessageService.info('click confirm');
  24.   }
  26.   constructor(private nzMessageService: NzMessageService) {}
  27. }

Popconfirm气泡确认框 - 图2

位置

位置有十二个方向。如需箭头指向目标元素中心，可以设置 arrowPointAtCenter。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  4. @Component({
  5.   selector: 'nz-demo-popconfirm-placement',
  6.   template: `
  7.     <div style="margin-left: 60px">
  8.       <button
  9.         nz-popconfirm
  10.         nzPopconfirmTitle="Are you sure delete this task?"
  11.         (nzOnConfirm)="confirm()"
  12.         (nzOnCancel)="cancel()"
  13.         nzPopconfirmPlacement="topLeft"
  14.         nz-button
  15.       >
  16.         TL
  17.       </button>
  18.       <button
  19.         nz-popconfirm
  20.         nzPopconfirmTitle="Are you sure delete this task?"
  21.         (nzOnConfirm)="confirm()"
  22.         (nzOnCancel)="cancel()"
  23.         nzPopconfirmPlacement="top"
  24.         nz-button
  25.       >
  26.         Top
  27.       </button>
  28.       <button
  29.         nz-popconfirm
  30.         nzPopconfirmTitle="Are you sure delete this task?"
  31.         (nzOnConfirm)="confirm()"
  32.         (nzOnCancel)="cancel()"
  33.         nzPopconfirmPlacement="topRight"
  34.         nz-button
  35.       >
  36.         TR
  37.       </button>
  38.     </div>
  39.     <div style="width: 60px; float: left;">
  40.       <button
  41.         nz-popconfirm
  42.         nzPopconfirmTitle="Are you sure delete this task?"
  43.         (nzOnConfirm)="confirm()"
  44.         (nzOnCancel)="cancel()"
  45.         nzPopconfirmPlacement="leftTop"
  46.         nz-button
  47.       >
  48.         LT
  49.       </button>
  50.       <button
  51.         nz-popconfirm
  52.         nzPopconfirmTitle="Are you sure delete this task?"
  53.         (nzOnConfirm)="confirm()"
  54.         (nzOnCancel)="cancel()"
  55.         nzPopconfirmPlacement="left"
  56.         nz-button
  57.       >
  58.         Left
  59.       </button>
  60.       <button
  61.         nz-popconfirm
  62.         nzPopconfirmTitle="Are you sure delete this task?"
  63.         (nzOnConfirm)="confirm()"
  64.         (nzOnCancel)="cancel()"
  65.         nzPopconfirmPlacement="leftBottom"
  66.         nz-button
  67.       >
  68.         LB
  69.       </button>
  70.     </div>
  71.     <div style="width: 60px; margin-left: 252px;">
  72.       <button
  73.         nz-popconfirm
  74.         nzPopconfirmTitle="Are you sure delete this task?"
  75.         (nzOnConfirm)="confirm()"
  76.         (nzOnCancel)="cancel()"
  77.         nzPopconfirmPlacement="rightTop"
  78.         nz-button
  79.       >
  80.         RT
  81.       </button>
  82.       <button
  83.         nz-popconfirm
  84.         nzPopconfirmTitle="Are you sure delete this task?"
  85.         (nzOnConfirm)="confirm()"
  86.         (nzOnCancel)="cancel()"
  87.         nzPopconfirmPlacement="right"
  88.         nz-button
  89.       >
  90.         Right
  91.       </button>
  92.       <button
  93.         nz-popconfirm
  94.         nzPopconfirmTitle="Are you sure delete this task?"
  95.         (nzOnConfirm)="confirm()"
  96.         (nzOnCancel)="cancel()"
  97.         nzPopconfirmPlacement="rightBottom"
  98.         nz-button
  99.       >
  100.         RB
  101.       </button>
  102.     </div>
  103.     <div style="margin-left: 60px; clear: both;">
  104.       <button
  105.         nz-popconfirm
  106.         nzPopconfirmTitle="Are you sure delete this task?"
  107.         (nzOnConfirm)="confirm()"
  108.         (nzOnCancel)="cancel()"
  109.         nzPopconfirmPlacement="bottomLeft"
  110.         nz-button
  111.       >
  112.         BL
  113.       </button>
  114.       <button
  115.         nz-popconfirm
  116.         nzPopconfirmTitle="Are you sure delete this task?"
  117.         (nzOnConfirm)="confirm()"
  118.         (nzOnCancel)="cancel()"
  119.         nzPopconfirmPlacement="bottom"
  120.         nz-button
  121.       >
  122.         Bottom
  123.       </button>
  124.       <button
  125.         nz-popconfirm
  126.         nzPopconfirmTitle="Are you sure delete this task?"
  127.         (nzOnConfirm)="confirm()"
  128.         (nzOnCancel)="cancel()"
  129.         nzPopconfirmPlacement="bottomRight"
  130.         nz-button
  131.       >
  132.         BR
  133.       </button>
  134.     </div>
  135.   `,
  136.   styles: [
  137.     `
  138.       button {
  139.         margin-right: 8px;
  140.         margin-bottom: 8px;
  141.         width: 70px;
  142.         text-align: center;
  143.         padding: 0;
  144.       }
  145.     `
  146.   ]
  147. })
  148. export class NzDemoPopconfirmPlacementComponent {
  149.   cancel(): void {
  150.     this.nzMessageService.info('click cancel');
  151.   }
  153.   confirm(): void {
  154.     this.nzMessageService.info('click confirm');
  155.   }
  157.   constructor(private nzMessageService: NzMessageService) {}
  158. }

Popconfirm气泡确认框 - 图3

自定义 icon 图标

使用 nzIcon 自定义提示图标。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-popconfirm-custom-icon',
  5.   template: `
  6.     <a nz-popconfirm nzPopconfirmTitle="Are you sure?" [nzIcon]="iconTpl">Delete</a>
  7.     <ng-template #iconTpl>
  8.       <i nz-icon nzType="question-circle-o" style="color: red;"></i>
  9.     </ng-template>
  10.   `
  11. })
  12. export class NzDemoPopconfirmCustomIconComponent {}

Popconfirm气泡确认框 - 图4

国际化

使用 okText 和 cancelText 自定义按钮文字。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  4. @Component({
  5.   selector: 'nz-demo-popconfirm-locale',
  6.   template: `
  7.     <a
  8.       nz-popconfirm
  9.       nzPopconfirmTitle="Are you sure?"
  10.       nzOkText="ok"
  11.       nzCancelText="cancel"
  12.       (nzOnConfirm)="confirm()"
  13.       (nzOnCancel)="cancel()"
  14.       >delete</a
  15.     >
  16.   `
  17. })
  18. export class NzDemoPopconfirmLocaleComponent {
  19.   cancel(): void {
  20.     this.nzMessageService.info('click cancel');
  21.   }
  23.   confirm(): void {
  24.     this.nzMessageService.info('click confirm');
  25.   }
  27.   constructor(private nzMessageService: NzMessageService) {}
  28. }

Popconfirm气泡确认框 - 图5

条件触发

可以判断是否需要弹出。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  4. @Component({
  5.   selector: 'nz-demo-popconfirm-dynamic-trigger',
  6.   template: `
  7.     <a
  8.       nz-popconfirm
  9.       nzPopconfirmTitle="Are you sure delete this task?"
  10.       [nzCondition]="switchValue"
  11.       (nzOnConfirm)="confirm()"
  12.       (nzOnCancel)="cancel()"
  13.       >Delete a task</a
  14.     >
  15.     <br />
  16.     <br />
  17.     Whether directly execute:
  18.     <nz-switch [(ngModel)]="switchValue"></nz-switch>
  19.   `
  20. })
  21. export class NzDemoPopconfirmDynamicTriggerComponent {
  22.   switchValue = false;
  24.   cancel(): void {
  25.     this.nzMessageService.info('click cancel');
  26.   }
  28.   confirm(): void {
  29.     this.nzMessageService.info('click confirm');
  30.   }
  32.   constructor(private nzMessageService: NzMessageService) {}
  33. }

API

[nz-popconfirm]directive

参数说明类型默认值
[nzPopconfirmTitle]确认框的描述string | TemplateRef<void>-
[nzPopconfirmTrigger]触发行为'click' | 'focus' | 'hover''hover'
[nzPopconfirmPlacement]气泡框位置'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom''top'
[nzCancelText]取消按钮文字string'取消'
[nzOkText]确认按钮文字string'确定'
[nzOkType]确认按钮类型'primary' | 'ghost' | 'dashed' | 'danger' | 'default''primary'
[nzCondition]是否直接触发 nzOnConfirm 而不弹出框booleanfalse
[nzIcon]自定义弹出框的 iconstring | TemplateRef<void>-
(nzOnCancel)点击取消的回调EventEmitter<void>-
(nzOnConfirm)点击确认的回调EventEmitter<void>-

更多属性请参考 Tooltip。

注意

请确保 nz-popconfirm 的子元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。