---
title: Popconfirm 气泡确认框 (done)
order: 32
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

### 使用原则

### 基本使用

```jsx
import React from 'react';
import { Popconfirm, Button, message } from 'quanta-design';

const text = '你确定这项操作确定这项吗?';
const buttonWidth = 88;

const buttonStyle = { width: 88, marginRight: 8, marginBottom: 8 };

function confirm() {
  message.info('Clicked on 确认.');
}

export default () => (
  <div className="demo">
    <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
      <Popconfirm
        placement="topLeft"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>TL</Button>
      </Popconfirm>
      <Popconfirm
        placement="top"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>Top</Button>
      </Popconfirm>
      <Popconfirm
        placement="topRight"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>TR</Button>
      </Popconfirm>
    </div>
    <div style={{ width: buttonWidth, float: 'left' }}>
      <Popconfirm
        placement="leftTop"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>LT</Button>
      </Popconfirm>
      <Popconfirm
        placement="left"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>Left</Button>
      </Popconfirm>
      <Popconfirm
        placement="leftBottom"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>LB</Button>
      </Popconfirm>
    </div>
    <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 16 }}>
      <Popconfirm
        placement="rightTop"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>RT</Button>
      </Popconfirm>
      <Popconfirm
        placement="right"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>Right</Button>
      </Popconfirm>
      <Popconfirm
        placement="rightBottom"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>RB</Button>
      </Popconfirm>
    </div>
    <div
      style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}
    >
      <Popconfirm
        placement="bottomLeft"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>BL</Button>
      </Popconfirm>
      <Popconfirm
        placement="bottom"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>Bottom</Button>
      </Popconfirm>
      <Popconfirm
        placement="bottomRight"
        title={text}
        onConfirm={confirm}
        okText="确认"
        cancelText="取消"
      >
        <Button style={{ ...buttonStyle }}>BR</Button>
      </Popconfirm>
    </div>
  </div>
);
```