Skip to content

Popconfirm 气泡确认

在被点击的元素附近弹出二次确认气泡。比 Modal 轻量,适合"删除 / 重置 / 注销"等需要明确反悔机会的危险操作。

基本使用

title 是主问句;用 description 补充后果说明。点确定 / 取消都会自动收起。

自定义按钮文案

confirm-text / cancel-text 调整按钮文字,业务话术更顺。

不同确定按钮风格

confirm-type 切换确定按钮风格:primary(默认蓝)/ danger(红)/ default(次按钮)。

改变弹出方位

placement 与 Popover 一致,支持 12 个方位。

隐藏图标 + 自定义图标颜色

hide-icon 完全去掉前置感叹号;保留时可用 icon-color 调整颜色(默认是警告黄)。

受控显示

通过 v-model:visible 自己掌控开合,常用于"先做异步校验再决定要不要弹"。

API

Props

参数类型默认值说明
titlestring''主问句
descriptionstring''补充说明(可选)
placementPopoverPlacement'top'12 方位之一
confirmTextstring'确 定'确定按钮文案(未传时走 ConfigProvider locale)
cancelTextstring'取 消'取消按钮文案
confirmType'primary' | 'danger' | 'default''primary'确定按钮类型
iconstring''自定义 icon 类名(覆盖默认感叹号)
iconColorstring'#faad14'图标颜色
hideIconbooleanfalse隐藏前置图标
widthnumber | string''弹出层宽度
disabledbooleanfalse禁用整个弹出(点击不响应)
visible / v-model:visiblebooleanundefined受控显示状态
trigger'click' | 'hover' | 'focus' | 'manual''click'触发方式

Events

事件名回调签名触发时机
confirm(e: MouseEvent)点击"确定"按钮
cancel(e: MouseEvent)点击"取消"按钮
update:visible(visible: boolean)v-model:visible 同步

Slots

名称说明
default触发气泡的元素
title自定义标题
description自定义描述
actions自定义底部按钮(参数 { confirm, cancel } 用于主动收起)

Released under the MIT License.