Popconfirm

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

何时使用

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

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

代码演示

Delete

基本

最简单的用法。

  1. <template>
  2. <a-popconfirm
  3. title="Are you sure delete this task?"
  4. ok-text="Yes"
  5. cancel-text="No"
  6. @confirm="confirm"
  7. @cancel="cancel"
  8. >
  9. <a href="#">Delete</a>
  10. </a-popconfirm>
  11. </template>
  12. <script>
  13. export default {
  14. methods: {
  15. confirm(e) {
  16. console.log(e);
  17. this.$message.success('Click on Yes');
  18. },
  19. cancel(e) {
  20. console.log(e);
  21. this.$message.error('Click on No');
  22. },
  23. },
  24. };
  25. </script>

Popconfirm气泡确认框 - 图1

位置

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

  1. <template>
  2. <div id="components-a-popconfirm-demo-placement">
  3. <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
  4. <a-popconfirm placement="topLeft" ok-text="Yes" cancel-text="No" @confirm="confirm">
  5. <template slot="title">
  6. <p>{{ text }}</p>
  7. <p>{{ text }}</p>
  8. </template>
  9. <a-button>TL</a-button>
  10. </a-popconfirm>
  11. <a-popconfirm placement="top" ok-text="Yes" cancel-text="No" @confirm="confirm">
  12. <template slot="title">
  13. <p>{{ text }}</p>
  14. <p>{{ text }}</p>
  15. </template>
  16. <a-button>Top</a-button>
  17. </a-popconfirm>
  18. <a-popconfirm placement="topRight" ok-text="Yes" cancel-text="No" @confirm="confirm">
  19. <template slot="title">
  20. <p>{{ text }}</p>
  21. <p>{{ text }}</p>
  22. </template>
  23. <a-button>TR</a-button>
  24. </a-popconfirm>
  25. </div>
  26. <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
  27. <a-popconfirm placement="leftTop" ok-text="Yes" cancel-text="No" @confirm="confirm">
  28. <template slot="title">
  29. <p>{{ text }}</p>
  30. <p>{{ text }}</p>
  31. </template>
  32. <a-button>LT</a-button>
  33. </a-popconfirm>
  34. <a-popconfirm placement="left" ok-text="Yes" cancel-text="No" @confirm="confirm">
  35. <template slot="title">
  36. <p>{{ text }}</p>
  37. <p>{{ text }}</p>
  38. </template>
  39. <a-button>Left</a-button>
  40. </a-popconfirm>
  41. <a-popconfirm placement="leftBottom" ok-text="Yes" cancel-text="No" @confirm="confirm">
  42. <template slot="title">
  43. <p>{{ text }}</p>
  44. <p>{{ text }}</p>
  45. </template>
  46. <a-button>LB</a-button>
  47. </a-popconfirm>
  48. </div>
  49. <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24}px` }">
  50. <a-popconfirm placement="rightTop" ok-text="Yes" cancel-text="No" @confirm="confirm">
  51. <template slot="title">
  52. <p>{{ text }}</p>
  53. <p>{{ text }}</p>
  54. </template>
  55. <a-button>RT</a-button>
  56. </a-popconfirm>
  57. <a-popconfirm placement="right" ok-text="Yes" cancel-text="No" @confirm="confirm">
  58. <template slot="title">
  59. <p>{{ text }}</p>
  60. <p>{{ text }}</p>
  61. </template>
  62. <a-button>Right</a-button>
  63. </a-popconfirm>
  64. <a-popconfirm placement="rightBottom" ok-text="Yes" cancel-text="No" @confirm="confirm">
  65. <template slot="title">
  66. <p>{{ text }}</p>
  67. <p>{{ text }}</p>
  68. </template>
  69. <a-button>RB</a-button>
  70. </a-popconfirm>
  71. </div>
  72. <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
  73. <a-popconfirm placement="bottomLeft" ok-text="Yes" cancel-text="No" @confirm="confirm">
  74. <template slot="title">
  75. <p>{{ text }}</p>
  76. <p>{{ text }}</p>
  77. </template>
  78. <a-button>BL</a-button>
  79. </a-popconfirm>
  80. <a-popconfirm placement="bottom" ok-text="Yes" cancel-text="No" @confirm="confirm">
  81. <template slot="title">
  82. <p>{{ text }}</p>
  83. <p>{{ text }}</p>
  84. </template>
  85. <a-button>Bottom</a-button>
  86. </a-popconfirm>
  87. <a-popconfirm placement="bottomRight" ok-text="Yes" cancel-text="No" @confirm="confirm">
  88. <template slot="title">
  89. <p>{{ text }}</p>
  90. <p>{{ text }}</p>
  91. </template>
  92. <a-button>BR</a-button>
  93. </a-popconfirm>
  94. </div>
  95. </div>
  96. </template>
  97. <script>
  98. import { message } from 'ant-design-vue';
  99. export default {
  100. data() {
  101. return {
  102. buttonWidth: 70,
  103. text: 'Are you sure to delete this task?',
  104. };
  105. },
  106. methods: {
  107. confirm() {
  108. message.info('Clicked on Yes.');
  109. },
  110. },
  111. };
  112. </script>
  113. <style scoped>
  114. #components-a-popconfirm-demo-placement .ant-btn {
  115. width: 70px;
  116. text-align: center;
  117. padding: 0;
  118. margin-right: 8px;
  119. margin-bottom: 8px;
  120. }
  121. </style>

Delete

自定义 Icon 图标

使用 icon 自定义提示 icon

  1. <template>
  2. <a-popconfirm title="Are you sure?">
  3. <a-icon slot="icon" type="question-circle-o" style="color: red" />
  4. <a href="#">Delete</a>
  5. </a-popconfirm>
  6. </template>

Delete

国际化

使用 okTextcancelText 自定义按钮文字。

  1. <template>
  2. <a-popconfirm title="Are you sure?" ok-text="Yes" cancel-text="No">
  3. <a href="#">Delete</a>
  4. </a-popconfirm>
  5. </template>

Popconfirm气泡确认框 - 图2

条件触发

可以判断是否需要弹出。

  1. <template>
  2. <div>
  3. <a-popconfirm
  4. title="Are you sure delete this task?"
  5. :visible="visible"
  6. ok-text="Yes"
  7. cancel-text="No"
  8. @visibleChange="handleVisibleChange"
  9. @confirm="confirm"
  10. @cancel="cancel"
  11. >
  12. <a href="#">Delete a task</a>
  13. </a-popconfirm>
  14. <br />
  15. <br />
  16. Whether directly execute:<a-checkbox default-checked @change="changeCondition" />
  17. </div>
  18. </template>
  19. <script>
  20. import { message } from 'ant-design-vue';
  21. export default {
  22. data() {
  23. return {
  24. visible: false,
  25. condition: true,
  26. };
  27. },
  28. methods: {
  29. changeCondition(e) {
  30. this.condition = e.target.checked;
  31. },
  32. confirm() {
  33. this.visible = false;
  34. message.success('Next step.');
  35. },
  36. cancel() {
  37. this.visible = false;
  38. message.error('Click on cancel.');
  39. },
  40. handleVisibleChange(visible) {
  41. if (!visible) {
  42. this.visible = false;
  43. return;
  44. }
  45. // Determining condition before show the popconfirm.
  46. console.log(this.condition);
  47. if (this.condition) {
  48. this.confirm(); // next step
  49. } else {
  50. this.visible = true;
  51. }
  52. },
  53. },
  54. };
  55. </script>

API

参数说明类型默认值版本
cancelText取消按钮文字string|slot取消
okText确认按钮文字string|slot确定
okType确认按钮类型stringprimary
title确认框的描述string|slot
icon自定义弹出气泡 Icon 图标vNode<Icon type=”exclamation-circle” />
disabled点击 Popconfirm 子元素是否弹出气泡确认框booleanfalse1.5.0

事件

事件名称说明回调参数
cancel点击取消的回调function(e)
confirm点击确认的回调function(e)
visibleChange显示隐藏的回调function(visible)

更多属性请参考 Tooltip

注意

请确保 Popconfirm 的子元素能接受 mouseentermouseleavefocusclick 事件。