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
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | string | '' | 主问句 |
| description | string | '' | 补充说明(可选) |
| placement | PopoverPlacement | 'top' | 12 方位之一 |
| confirmText | string | '确 定' | 确定按钮文案(未传时走 ConfigProvider locale) |
| cancelText | string | '取 消' | 取消按钮文案 |
| confirmType | 'primary' | 'danger' | 'default' | 'primary' | 确定按钮类型 |
| icon | string | '' | 自定义 icon 类名(覆盖默认感叹号) |
| iconColor | string | '#faad14' | 图标颜色 |
| hideIcon | boolean | false | 隐藏前置图标 |
| width | number | string | '' | 弹出层宽度 |
| disabled | boolean | false | 禁用整个弹出(点击不响应) |
| visible / v-model:visible | boolean | undefined | 受控显示状态 |
| 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 } 用于主动收起) |