Popconfirm 气泡确认框

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

何时使用#

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

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

代码演示

基本

最简单的用法。

import { Popconfirm, message } from 'antd';

function confirm() {
  message.success('点击了确定');
}

function cancel() {
  message.error('点击了取消');
}

ReactDOM.render(
  <Popconfirm title="确定要删除这个任务吗？" onConfirm={confirm} onCancel={cancel}>
    <a href="#">删除</a>
  </Popconfirm>
, document.getElementById('components-popconfirm-demo-basic'));
位置

位置有四个方向。

import { Popconfirm, message, Button } from 'antd';

const text = '确定要删除这个任务吗？';

function confirm() {
  message.info('点击了确定');
}

ReactDOM.render(<div>
  <div style={{marginLeft: 60}}>
    <Popconfirm placement="topLeft" title={text} onConfirm={confirm}>
      <Button>上左</Button>
    </Popconfirm>
    <Popconfirm placement="top" title={text} onConfirm={confirm}>
      <Button>上边</Button>
    </Popconfirm>
    <Popconfirm placement="topRight" title={text} onConfirm={confirm}>
      <Button>上右</Button>
    </Popconfirm>
  </div>
  <div style={{width: 60, float: 'left'}}>
    <Popconfirm placement="leftTop" title={text} onConfirm={confirm}>
      <Button>左上</Button>
    </Popconfirm>
    <Popconfirm placement="left" title={text} onConfirm={confirm}>
      <Button>左边</Button>
    </Popconfirm>
    <Popconfirm placement="leftBottom" title={text} onConfirm={confirm}>
      <Button>左下</Button>
    </Popconfirm>
  </div>
  <div style={{width: 60, marginLeft: 270}}>
    <Popconfirm placement="rightTop" title={text} onConfirm={confirm}>
      <Button>右上</Button>
    </Popconfirm>
    <Popconfirm placement="right" title={text} onConfirm={confirm}>
      <Button>右边</Button>
    </Popconfirm>
    <Popconfirm placement="rightBottom" title={text} onConfirm={confirm}>
      <Button>右下</Button>
    </Popconfirm>
  </div>
  <div style={{marginLeft: 60, clear: 'both'}}>
    <Popconfirm placement="bottomLeft" title={text} onConfirm={confirm}>
      <Button>下左</Button>
    </Popconfirm>
    <Popconfirm placement="bottom" title={text} onConfirm={confirm}>
      <Button>下边</Button>
    </Popconfirm>
    <Popconfirm placement="bottomRight" title={text} onConfirm={confirm}>
      <Button>下右</Button>
    </Popconfirm>
  </div>
</div>, document.getElementById('components-popconfirm-demo-placement'));

API#

参数 说明 类型 默认值
placement 气泡框位置，可选 top/left/right/bottom string top
title 确认框的描述 string 无
onConfirm 点击确认的回调 function 无
onCancel 卡片内容 function 无