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';
  3. @Component({
  4. selector: 'nz-demo-popconfirm-basic',
  5. template: `
  6. <a
  7. nz-popconfirm
  8. nzPopconfirmTitle="Are you sure delete this task?"
  9. nzPopconfirmPlacement="bottom"
  10. (nzOnConfirm)="confirm()"
  11. (nzOnCancel)="cancel()"
  12. >Delete</a
  13. >
  14. `
  15. })
  16. export class NzDemoPopconfirmBasicComponent {
  17. cancel(): void {
  18. this.nzMessageService.info('click cancel');
  19. }
  20. confirm(): void {
  21. this.nzMessageService.info('click confirm');
  22. }
  23. constructor(private nzMessageService: NzMessageService) {}
  24. }

Popconfirm气泡确认框 - 图2

位置

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

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

Popconfirm气泡确认框 - 图3

自定义 icon 图标

使用 nzIcon 自定义提示图标。

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

Popconfirm气泡确认框 - 图4

国际化

使用 okTextcancelText 自定义按钮文字。

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

Popconfirm气泡确认框 - 图5

条件触发

可以判断是否需要弹出。

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

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 的子元素能接受 onMouseEnteronMouseLeaveonFocusonClick 事件。