• Popconfirm气泡确认框
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • [nz-popconfirm]directive
    • 注意

    Popconfirm气泡确认框

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

    何时使用

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

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

    代码演示

    Popconfirm气泡确认框 - 图1

    基本

    最简单的用法。

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

    Popconfirm气泡确认框 - 图2

    位置

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

    1. import { Component } from '@angular/core';
    2. import { NzMessageService } from 'ng-zorro-antd';
    4. @Component({
    5.   selector: 'nz-demo-popconfirm-placement',
    6.   template: `
    7.     <div style="margin-left: 60px">
    8.       <button
    9.         nz-popconfirm
    10.         nzTitle="Are you sure delete this task?"
    11.         (nzOnConfirm)="confirm()"
    12.         (nzOnCancel)="cancel()"
    13.         nzPlacement="topLeft"
    14.         nz-button
    15.       >
    16.         TL
    17.       </button>
    18.       <button
    19.         nz-popconfirm
    20.         nzTitle="Are you sure delete this task?"
    21.         (nzOnConfirm)="confirm()"
    22.         (nzOnCancel)="cancel()"
    23.         nzPlacement="top"
    24.         nz-button
    25.       >
    26.         Top
    27.       </button>
    28.       <button
    29.         nz-popconfirm
    30.         nzTitle="Are you sure delete this task?"
    31.         (nzOnConfirm)="confirm()"
    32.         (nzOnCancel)="cancel()"
    33.         nzPlacement="topRight"
    34.         nz-button
    35.       >
    36.         TR
    37.       </button>
    38.     </div>
    39.     <div style="width: 60px; float: left;">
    40.       <button
    41.         nz-popconfirm
    42.         nzTitle="Are you sure delete this task?"
    43.         (nzOnConfirm)="confirm()"
    44.         (nzOnCancel)="cancel()"
    45.         nzPlacement="leftTop"
    46.         nz-button
    47.       >
    48.         LT
    49.       </button>
    50.       <button
    51.         nz-popconfirm
    52.         nzTitle="Are you sure delete this task?"
    53.         (nzOnConfirm)="confirm()"
    54.         (nzOnCancel)="cancel()"
    55.         nzPlacement="left"
    56.         nz-button
    57.       >
    58.         Left
    59.       </button>
    60.       <button
    61.         nz-popconfirm
    62.         nzTitle="Are you sure delete this task?"
    63.         (nzOnConfirm)="confirm()"
    64.         (nzOnCancel)="cancel()"
    65.         nzPlacement="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.         nzTitle="Are you sure delete this task?"
    75.         (nzOnConfirm)="confirm()"
    76.         (nzOnCancel)="cancel()"
    77.         nzPlacement="rightTop"
    78.         nz-button
    79.       >
    80.         RT
    81.       </button>
    82.       <button
    83.         nz-popconfirm
    84.         nzTitle="Are you sure delete this task?"
    85.         (nzOnConfirm)="confirm()"
    86.         (nzOnCancel)="cancel()"
    87.         nzPlacement="right"
    88.         nz-button
    89.       >
    90.         Right
    91.       </button>
    92.       <button
    93.         nz-popconfirm
    94.         nzTitle="Are you sure delete this task?"
    95.         (nzOnConfirm)="confirm()"
    96.         (nzOnCancel)="cancel()"
    97.         nzPlacement="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.         nzTitle="Are you sure delete this task?"
    107.         (nzOnConfirm)="confirm()"
    108.         (nzOnCancel)="cancel()"
    109.         nzPlacement="bottomLeft"
    110.         nz-button
    111.       >
    112.         BL
    113.       </button>
    114.       <button
    115.         nz-popconfirm
    116.         nzTitle="Are you sure delete this task?"
    117.         (nzOnConfirm)="confirm()"
    118.         (nzOnCancel)="cancel()"
    119.         nzPlacement="bottom"
    120.         nz-button
    121.       >
    122.         Bottom
    123.       </button>
    124.       <button
    125.         nz-popconfirm
    126.         nzTitle="Are you sure delete this task?"
    127.         (nzOnConfirm)="confirm()"
    128.         (nzOnCancel)="cancel()"
    129.         nzPlacement="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 nzTitle="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';
    4. @Component({
    5.   selector: 'nz-demo-popconfirm-locale',
    6.   template: `
    7.     <a
    8.       nz-popconfirm
    9.       nzTitle="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';
    4. @Component({
    5.   selector: 'nz-demo-popconfirm-dynamic-trigger',
    6.   template: `
    7.     <a
    8.       nz-popconfirm
    9.       nzTitle="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

    单独引入此组件

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

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

    [nz-popconfirm]directive

    参数说明类型默认值
    [nzCancelText]取消按钮文字string'取消'
    [nzOkText]确认按钮文字string'确定'
    [nzOkType]确认按钮类型'primary'｜'ghost'｜'dashed'｜'danger'｜'default''primary'
    [nzTitle]确认框的描述string｜TemplateRef<void>-
    [nzCondition]是否直接触发 nzOnConfirm 而不弹出框booleanfalse
    [nzIcon]自定义弹出框的 iconstring｜TemplateRef<void>-
    (nzOnCancel)点击取消的回调EventEmitter<void>-
    (nzOnConfirm)点击确认的回调EventEmitter<void>-

    更多属性请参考 Tooltip。

    注意

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