Popconfirm 气泡确认框
点击某个元素后弹出轻量二次确认框。适合删除 SOP 项目、移除配置项、撤销操作等影响范围较小但需要确认的操作。
展示位置
通过 placement 设置气泡确认框的位置。位置由方向和对齐方式组成，例如 top-start、left、bottom-end。
vue
<el-popconfirm title="确认执行顶部左对齐操作？" placement="top-start">
<template #reference>
<el-button>top-start</el-button>
</template>
</el-popconfirm>
<el-popconfirm title="确认执行底部右对齐操作？" placement="bottom-end">
<template #reference>
<el-button>bottom-end</el-button>
</template>
</el-popconfirm>基础用法
Popconfirm 的属性与 Popover 类似。内容通过 title 设置，content 属性会被忽略。
vue
<el-popconfirm title="确认删除这个 SOP 项目？">
<template #reference>
<el-button type="danger">删除</el-button>
</template>
</el-popconfirm>
<el-popconfirm title="确认撤销本次配置变更？" confirm-button-text="确认" cancel-button-text="取消">
<template #reference>
<el-button>撤销变更</el-button>
</template>
</el-popconfirm>自定义图标
通过 icon 和 icon-color 可以替换默认图标和颜色；设置 hide-icon 可以隐藏图标。
vue
<script setup lang="ts">
import { InfoFilled } from '@element-plus/icons-vue'
</script>
<template>
<el-popconfirm
title="该操作会影响当前报价，确认继续？"
:icon="InfoFilled"
icon-color="#626aef"
>
<template #reference>
<el-button type="primary">品牌图标</el-button>
</template>
</el-popconfirm>
</template>自定义按钮
可以通过 confirm-button-text、cancel-button-text、confirm-button-type、cancel-button-type 调整按钮文案和类型。
vue
<el-popconfirm
width="240"
title="确认删除该报价项？删除后无法恢复。"
confirm-button-text="删除"
cancel-button-text="暂不删除"
confirm-button-type="danger"
cancel-button-type="info"
@confirm="handleDelete"
@cancel="handleCancel"
>
<template #reference>
<el-button type="danger" plain>删除报价项</el-button>
</template>
</el-popconfirm>自定义操作区
actions 插槽可以完全自定义底部操作区。插槽提供 confirm 与 cancel 方法，调用后会触发对应事件。
vue
<el-popconfirm title="是否确认删除该 SOP 步骤？" @confirm="handleDelete">
<template #reference>
<el-button>自定义操作区</el-button>
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">先保留</el-button>
<el-button size="small" type="danger" @click="confirm">确认删除</el-button>
</template>
</el-popconfirm>确认与取消事件
通过 confirm 和 cancel 事件处理用户选择。常见做法是在确认后执行删除、归档等操作，并用 Message 提示结果。
vue
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const lastAction = ref('暂无')
const handleDelete = () => {
lastAction.value = '已确认'
ElMessage.success('删除成功')
}
const handleCancel = () => {
lastAction.value = '已取消'
ElMessage.info('已取消操作')
}
</script>主题与宽度
effect 可以设置 Tooltip 主题，width 控制气泡宽度，teleported 控制弹层是否插入到 body。
vue
<el-popconfirm title="浅色主题适合常规操作确认。" effect="light" width="220">
<template #reference>
<el-button>Light</el-button>
</template>
</el-popconfirm>
<el-popconfirm title="深色主题适合局部深色工具栏。" effect="dark" width="220">
<template #reference>
<el-button>Dark</el-button>
</template>
</el-popconfirm>Popconfirm API
Popconfirm 继承 Tooltip 的大部分属性，但不包括 popper-class、popper-style、fallback-placements。重复属性可参考 Popover / Tooltip 文档。
Popconfirm 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题内容 | string | - |
| effect | Tooltip 主题，内置 dark 和 light | dark | light | string | light |
| confirm-button-text | 确认按钮文字 | string | - |
| cancel-button-text | 取消按钮文字 | string | - |
| confirm-button-type | 确认按钮类型 | primary | success | warning | danger | info | text | primary |
| cancel-button-type | 取消按钮类型 | primary | success | warning | danger | info | text | text |
| icon | 自定义图标 | string | component | QuestionFilled |
| icon-color | 图标颜色 | string | #f90 |
| hide-icon | 是否隐藏图标 | boolean | false |
| hide-after | 关闭时的延迟，单位毫秒 | number | 200 |
| teleported | 是否将弹层插入至 body | boolean | true |
| persistent | 长时间不触发且为 false 时是否删除弹层 | boolean | false |
| width | 弹层宽度，最小宽度 150px | string | number | 150 |
| placement | 弹层出现位置 | enum | bottom |
| trigger | 触发方式 | hover | click | focus | contextmenu / array | click |
| disabled | 是否禁用 | boolean | false |
| offset | 弹层偏移量 | number | 12 |
| show-arrow | 是否显示箭头 | boolean | true |
Popconfirm 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| confirm | 点击确认按钮时触发 | Function |
| cancel | 点击取消按钮时触发 | Function |
Popconfirm 插槽
| 插槽名 | 说明 | 类型 |
|---|---|---|
| reference | 触发 Popconfirm 显示的元素 | - |
| actions | 自定义页脚内容，提供 confirm 和 cancel 方法 | object |
Popconfirm 暴露
| 名称 | 说明 | 类型 |
|---|---|---|
| popperRef | el-popper 组件实例 | object |
| hide | 隐藏 Popconfirm | Function |