Popconfirm气泡确认框

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

何时使用

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

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

代码演示

Popconfirm气泡确认框 - 图1

基本

最简单的用法。

  1. import { Popconfirm, message } from 'antd';
  2. function confirm(e) {
  3. console.log(e);
  4. message.success('Click on Yes');
  5. }
  6. function cancel(e) {
  7. console.log(e);
  8. message.error('Click on No');
  9. }
  10. ReactDOM.render(
  11. <Popconfirm
  12. title="Are you sure to delete this task?"
  13. onConfirm={confirm}
  14. onCancel={cancel}
  15. okText="Yes"
  16. cancelText="No"
  17. >
  18. <a href="#">Delete</a>
  19. </Popconfirm>,
  20. mountNode,
  21. );

Popconfirm气泡确认框 - 图2

位置

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

  1. import { Popconfirm, message, Button } from 'antd';
  2. const text = 'Are you sure to delete this task?';
  3. function confirm() {
  4. message.info('Clicked on Yes.');
  5. }
  6. ReactDOM.render(
  7. <div className="demo">
  8. <div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
  9. <Popconfirm placement="topLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
  10. <Button>TL</Button>
  11. </Popconfirm>
  12. <Popconfirm placement="top" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
  13. <Button>Top</Button>
  14. </Popconfirm>
  15. <Popconfirm
  16. placement="topRight"
  17. title={text}
  18. onConfirm={confirm}
  19. okText="Yes"
  20. cancelText="No"
  21. >
  22. <Button>TR</Button>
  23. </Popconfirm>
  24. </div>
  25. <div style={{ width: 70, float: 'left' }}>
  26. <Popconfirm placement="leftTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
  27. <Button>LT</Button>
  28. </Popconfirm>
  29. <Popconfirm placement="left" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
  30. <Button>Left</Button>
  31. </Popconfirm>
  32. <Popconfirm
  33. placement="leftBottom"
  34. title={text}
  35. onConfirm={confirm}
  36. okText="Yes"
  37. cancelText="No"
  38. >
  39. <Button>LB</Button>
  40. </Popconfirm>
  41. </div>
  42. <div style={{ width: 70, marginLeft: 304 }}>
  43. <Popconfirm
  44. placement="rightTop"
  45. title={text}
  46. onConfirm={confirm}
  47. okText="Yes"
  48. cancelText="No"
  49. >
  50. <Button>RT</Button>
  51. </Popconfirm>
  52. <Popconfirm placement="right" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
  53. <Button>Right</Button>
  54. </Popconfirm>
  55. <Popconfirm
  56. placement="rightBottom"
  57. title={text}
  58. onConfirm={confirm}
  59. okText="Yes"
  60. cancelText="No"
  61. >
  62. <Button>RB</Button>
  63. </Popconfirm>
  64. </div>
  65. <div style={{ marginLeft: 70, clear: 'both', whiteSpace: 'nowrap' }}>
  66. <Popconfirm
  67. placement="bottomLeft"
  68. title={text}
  69. onConfirm={confirm}
  70. okText="Yes"
  71. cancelText="No"
  72. >
  73. <Button>BL</Button>
  74. </Popconfirm>
  75. <Popconfirm placement="bottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
  76. <Button>Bottom</Button>
  77. </Popconfirm>
  78. <Popconfirm
  79. placement="bottomRight"
  80. title={text}
  81. onConfirm={confirm}
  82. okText="Yes"
  83. cancelText="No"
  84. >
  85. <Button>BR</Button>
  86. </Popconfirm>
  87. </div>
  88. </div>,
  89. mountNode,
  90. );

Popconfirm气泡确认框 - 图3

自定义 Icon 图标

自定义提示 icon

  1. import { Popconfirm } from 'antd';
  2. import { QuestionCircleOutlined } from '@ant-design/icons';
  3. ReactDOM.render(
  4. <Popconfirm title="Are you sure?" icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
  5. <a href="#">Delete</a>
  6. </Popconfirm>,
  7. mountNode,
  8. );

Popconfirm气泡确认框 - 图4

国际化

使用 okTextcancelText 自定义按钮文字。

  1. import { Popconfirm } from 'antd';
  2. ReactDOM.render(
  3. <Popconfirm title="Are you sure?" okText="Yes" cancelText="No">
  4. <a href="#">Delete</a>
  5. </Popconfirm>,
  6. mountNode,
  7. );

Popconfirm气泡确认框 - 图5

条件触发

可以判断是否需要弹出。

  1. import { Popconfirm, Switch, message } from 'antd';
  2. class App extends React.Component {
  3. state = {
  4. visible: false,
  5. condition: true, // Whether meet the condition, if not show popconfirm.
  6. };
  7. changeCondition = value => {
  8. this.setState({ condition: value });
  9. };
  10. confirm = () => {
  11. this.setState({ visible: false });
  12. message.success('Next step.');
  13. };
  14. cancel = () => {
  15. this.setState({ visible: false });
  16. message.error('Click on cancel.');
  17. };
  18. handleVisibleChange = visible => {
  19. if (!visible) {
  20. this.setState({ visible });
  21. return;
  22. }
  23. // Determining condition before show the popconfirm.
  24. console.log(this.state.condition);
  25. if (this.state.condition) {
  26. this.confirm(); // next step
  27. } else {
  28. this.setState({ visible }); // show the popconfirm
  29. }
  30. };
  31. render() {
  32. return (
  33. <div>
  34. <Popconfirm
  35. title="Are you sure delete this task?"
  36. visible={this.state.visible}
  37. onVisibleChange={this.handleVisibleChange}
  38. onConfirm={this.confirm}
  39. onCancel={this.cancel}
  40. okText="Yes"
  41. cancelText="No"
  42. >
  43. <a href="#">Delete a task</a>
  44. </Popconfirm>
  45. <br />
  46. <br />
  47. Whether directly execute
  48. <Switch defaultChecked onChange={this.changeCondition} />
  49. </div>
  50. );
  51. }
  52. }
  53. ReactDOM.render(<App />, mountNode);

Popconfirm气泡确认框 - 图6

异步关闭

点击确定后异步关闭气泡确认框,例如提交表单。

  1. import { Popconfirm, Button } from 'antd';
  2. const App = () => {
  3. const [visible, setVisible] = React.useState(false);
  4. const [confirmLoading, setConfirmLoading] = React.useState(false);
  5. const showPopconfirm = () => {
  6. setVisible(true);
  7. };
  8. const handleOk = () => {
  9. setConfirmLoading(true);
  10. setTimeout(() => {
  11. setVisible(false);
  12. setConfirmLoading(false);
  13. }, 2000);
  14. };
  15. const handleCancel = () => {
  16. console.log('Clicked cancel button');
  17. setVisible(false);
  18. };
  19. return (
  20. <>
  21. <Popconfirm
  22. title="Title"
  23. visible={visible}
  24. onConfirm={handleOk}
  25. okButtonProps={{ loading: confirmLoading }}
  26. onCancel={handleCancel}
  27. >
  28. <Button type="primary" onClick={showPopconfirm}>
  29. Open Popconfirm with async logic
  30. </Button>
  31. </Popconfirm>
  32. </>
  33. );
  34. };
  35. ReactDOM.render(<App />, mountNode);

API

参数说明类型默认值
cancelButtonPropscancel 按钮 propsButtonProps-
cancelText取消按钮文字string取消
disabled阻止点击 Popconfirm 子元素时弹出确认框booleanfalse
icon自定义弹出气泡 Icon 图标ReactNode<ExclamationCircle />
okButtonPropsok 按钮 propsButtonProps-
okText确认按钮文字string确定
okType确认按钮类型stringprimary
title确认框的描述ReactNode | () => ReactNode-
onCancel点击取消的回调function(e)-
onConfirm点击确认的回调function(e)-

更多属性请参考 Tooltip

注意

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