---
title: Popconfirm 气泡确认框
description: 气泡确认框通常用于不会造成严重后果的二次确认场景，其会在点击元素上弹出浮层进行提示确认。气泡确认框没有蒙层，点击确认框以外的区域即可关闭。
isComponent: true
usage: { title: "", description: "" }
spline: message
author: { code: "swimly", doc: "swimly" }
---

## 基本用法

使用说明文字及操作按钮对较简单的操作进行二次确认，通过`default`或者`triggerElement`可设置触发元素，通过`content`设置气泡
确认框的内容。

> 提示：上述属性为`LNode`类型，支持`slot`和`props`，当 props 为`function`时，需给 script 添加`lang="jsx"`。

{{ base }}

## 自定义按钮

默认情况会自动渲染取消，确认按钮，并且可通过`onCancel`和`onConfirm`来监听点击事件，如果默认的按钮不能达到要求，可通
过`cancelBtn`，`confirmBtn`分别设置取消和确认按钮，届时便不能自动监听按钮的点击事件，需要自行设置。

> 提示：`cancelBtn`和`confirmBtn`为`LNode`，支持`slot`和`props`，当 props 的值类型为`function`，需要给 script 设
> 置`lang="jsx"`。

{{ button }}

## 不同主题

通过`theme`可设置气泡框的主题（主要表现在前面的图标），可选：`default`，`warning`，`danger`，可通过`icon`自定义图标。

> 注意：`icon`定义的图标优先级高于`theme`的默认图标。

{{ theme }}

## 自定义内容

通过`content`可定义较为复杂的确认框场景，为`LNode`类型，（上面已经介绍过！）

{{ describe }}

## 确认框位置

通过`placement`可设置浮层出现的位置，可选：`top` 、 `left` 、 `right` 、 `bottom` 、 `top-left` 、 `top-right` 、
`bottom-left` 、 `bottom-right` 、 `left-top` 、 `left-bottom` 、 `right-top` 、 `right-bottom`,还可通过`popupProps`传
递`popup`的配置项

{{ position }}
