Popconfirm气泡确认框

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

何时使用

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

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

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

代码演示Popconfirm气泡确认框 - 图2

Popconfirm气泡确认框 - 图3

基本

最简单的用法。

  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气泡确认框 - 图4

位置

位置有十二个方向。

  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气泡确认框 - 图5

自定义 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气泡确认框 - 图6

国际化

使用 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 nz-popconfirm nzPopconfirmTitle="Are you sure?" nzOkText="ok" nzCancelText="cancel" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()"
  7. >delete</a
  8. >
  9. `
  10. })
  11. export class NzDemoPopconfirmLocaleComponent {
  12. cancel(): void {
  13. this.nzMessageService.info('click cancel');
  14. }
  15. confirm(): void {
  16. this.nzMessageService.info('click confirm');
  17. }
  18. constructor(private nzMessageService: NzMessageService) {}
  19. }

Popconfirm气泡确认框 - 图7

条件触发

可以判断是否需要弹出。

  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. }

Popconfirm气泡确认框 - 图8

隐藏箭头

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-popconfirm-hide-arrow',
  4. template: ` <a nz-popconfirm nzPopconfirmTitle="Are you sure?" [nzPopconfirmShowArrow]="false">Delete</a> `
  5. })
  6. export class NzDemoPopconfirmHideArrowComponent {}

API

[nz-popconfirm]directive

参数说明类型默认值
[nzPopconfirmTitle]确认框的描述string | TemplateRef<void>-
[nzPopconfirmTrigger]触发行为,为 null 时不响应光标事件‘click’ | ‘focus’ | ‘hover’ | null‘hover’
[nzPopconfirmPlacement]气泡框位置‘top’ | ‘left’ | ‘right’ | ‘bottom’ | ‘topLeft’ | ‘topRight’ | ‘bottomLeft’ | ‘bottomRight’ | ‘leftTop’ | ‘leftBottom’ | ‘rightTop’ | ‘rightBottom’‘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>-
[nzPopoverMouseEnterDelay]鼠标移入后延时多少才显示确认框,单位:秒number0.15
[nzPopoverMouseLeaveDelay]鼠标移出后延时多少才隐藏确认框,单位:秒number0.1
[nzPopoverOverlayClassName]卡片类名string-
[nzPopoverOverlayStyle]卡片样式object-
参数说明类型默认值
[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 事件。