Popconfirm 气泡确认框
点击按钮时弹出的气泡式确认框,用于轻量化的二次确认操作。
代码演示
API
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
cancel-text | 左边按钮的文本值 | String | — | '取消' | |
cancel-button-text | * 同 cancel-text | String | — | — | v2.0.0 |
hidden-popper-on-click-document | 点击其他文档时关闭气泡(仅当 trigger 为空时有效) | Boolean | — | true | |
icon | 气泡框中的 icon 的 class 名 | String | — | 'w-icon-info' | |
icon-color | 气泡框中的 icon 的颜色 | String | — | — | v2.0.0 |
immediately | 是否需要气泡关闭延迟(300ms),优先级高于close-delay | Boolean | — | false | |
ok-text | 右边按钮的文本值 | String | — | '确定' | |
confirm-button-text | * 同 ok-text | String | — | — | v2.0.0 |
popper-class | 为 popper 添加类名 | String | — | — | |
placement | 出现位置 | String | 'top' | 'right' | 'bottom' | 'left' 及各方向的修饰符(-start, -end) | 'bottom-start' | |
show-icon | 是否显示气泡框中的 icon | Boolean | — | true | |
title | 气泡框询问信息文本 | String | — | — | |
trigger | 打开气泡框的触发方式 | String | 'hover' | 'click' | 'hover' | |
visible-arrow | 是否显示 popover 的箭头 | Boolean | — | true | |
v-model/value | 气泡状态(显示-true,隐藏-false) | Boolean | — | false | |
close-delay | 气泡关闭延迟(单位 ms) | Number | — | 200 | v2.0.0 |
open-delay | 气泡打开延迟(单位 ms) | Number | — | 0 | v2.0.0 |
confirm-button-type | 确认按钮类型 | String | 同 button 组件的 type | 'primary' | v2.0.0 |
cancel-button-type | 取消按钮类型 | String | 同 button 组件的 type | — | v2.0.0 |
max-width | 气泡的最大宽度(普通 max-width 属性的合法值) | String | — | 400px | v2.2.10 |
confirm-button-size | 确认按钮尺寸 | String | 同 button 组件的 size | 'primary' | v2.4.18 |
cancel-button-size | 取消按钮尺寸 | String | 同 button 组件的 size | — | v2.4.18 |
before-confirm-click | 确定按钮点击触发的回调函数(用于拦截确定按钮点击事件) | Function | — | — | v2.4.20 |
before-cancel-click | 取消按钮点击触发的回调函数(用于拦截取消按钮点击事件) | Function | — | — | v2.4.20 |
Slot
参数 | 说明 | Version |
reference | popconfirm 触发 dom | |
Popper Methods
事件名称 | 说明 | 回调参数 | Version |
updatePopper | 更新 popper(当相对定位元素发生位置或宽高变化时,需要更新 popper 的位置时调用) | — | |
Events
事件名称 | 说明 | 回调参数 | Version |
confirm | 确定时(点击右边按钮时)触发 | — | |
onConfirm | * 同 confirm | — | v2.0.0 |
cancel | 确定时(点击左边按钮时)触发 | — | |
onCancel | * 同 cancel | — | v2.0.0 |
document-click | 气泡状态完全由 value/v-model 控制时有效(在 value 为 true 时绑定文档点击事件,为 false 时解绑) | — | |
上次更新: 8/5/2024, 3:09:12 PM