---
name: arco-vue-popconfirm
description: "Arco Design Vue 气泡确认框 Popconfirm 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-popconfirm>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---

# 气泡确认框 Popconfirm

## 简介

气泡确认框的基本用法。

## 基本用法

```vue
<template>
  <a-popconfirm content="Are you sure you want to delete?">
    <a-button>Click To Delete</a-button>
  </a-popconfirm>
</template>
```

## API

### `<popconfirm>` 属性

|参数名|描述|类型|默认值|
|---|---|---|:---:|
|content|内容|`string`|`-`|
|position|弹出位置|`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br' \| 'left' \| 'lt' \| 'lb' \| 'right' \| 'rt' \| 'rb'`|`'top'`|
|popup-visible **(v-model)**|气泡确认框是否可见|`boolean`|`-`|
|default-popup-visible|气泡确认框默认是否可见（非受控模式）|`boolean`|`false`|
|type|气泡确认框的类型|`'info' \| 'success' \| 'warning' \| 'error'`|`'info'`|
|ok-text|确认按钮的内容|`string`|`-`|
|cancel-text|取消按钮的内容|`string`|`-`|
|ok-loading|确认按钮是否为加载中状态|`boolean`|`false`|
|ok-button-props|确认按钮的Props|`ButtonProps`|`-`|
|cancel-button-props|取消按钮的Props|`ButtonProps`|`-`|
|content-class|弹出框内容的类名|`ClassName`|`-`|
|content-style|弹出框内容的样式|`CSSProperties`|`-`|

> 仅列出常用项，低频属性按需查阅官方 API。

### `<popconfirm>` 事件

|事件名|描述|参数|
|---|---|---|
|popup-visible-change|气泡确认框的显隐状态改变时触发|visible: `boolean`|
|ok|点击确认按钮时触发|-|
|cancel|点击取消按钮时触发|-|

### `<popconfirm>` 插槽

|插槽名|描述|参数|
|---|:---:|---|
|icon|图标|-|
|content|内容|-|

## 常用模式

- **自定义按钮**：自定义按钮的文字或图标。
- **弹出位置**：`popconfirm` 支持 12 个不同的方位。分别为：`上左` `上` `上右` `下左` `下` `下右` `左上` `左` `左下` `右上` `右` `右下`。
- **确认框类型**：通过 `type` 属性可以设置确认框类型。

## 最佳实践

- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。