Skip to content

Popconfirm 气泡确认框

作用类似于Confirm 确认, 最大的区别在于触发的方式不相同。 Confirm属于函数式触发, 而Popconfirm属于组件触发。 在表现上,Popconfirm更加优雅!

TIP

仅介绍部分用法。

Tooltip是基于Floating组件开发的, 几乎继承了其全部Props, 具体可参考Floating 浮动.

基础用法

通过cancel confirm事件处理用户的取消和确认操作

自定义弹出框内容

  • cancelBtnText 设置气泡确认框取消按钮文本
  • confirmBtnText 设置气泡确认框确认按钮文本
  • type 设置气泡确认框类型(自动选择图标&图标颜色)
  • icon自定义气泡确认框图标
  • iconColor自定义气泡确认框图标颜色

Popconfirm API

Popconfirm Props

属性名说明可选值默认值
trigger气泡确认框的触发方式'hover' | 'click' | 'foucs' | 'clickToOpen' | 'unset'click
placement气泡确认框相当于引用元素的定位'top' | 'left' | 'bottom' | 'right' | 'top-start' | 'left-start' | 'bottom-start' | 'right-start' | 'top-end' | 'left-end' | 'bottom-end' | 'right-end'bottom
transition气泡确认框出现/消失过渡Stringfade
openDelay气泡确认框打开延时Number0
closeDelay气泡确认框关闭延时Number0
disabled是否禁用气泡确认框Booleanfalse
offset气泡确认框的偏移量Number5
closeOnClickBody是否在点击其他元素时关闭Booleanfalse
openOnMounted是否在挂载时立即显示Booleanfalse
teleported是否瞬移到body元素下Booleantrue
showArrow是否展示箭头Booleanfalse
floatingClass气泡确认框默认会嵌套一层div,设置这层div的类名String---
reference解耦模式下的引用元素Ref<MaybeElement>---
quickTrack是否开启快速跟踪,若气泡确认框跟不上引用元素的改变开启此项Booleanfalse
cancelBtnText取消按钮的文本String取消
confirmBtnType确认按钮的文本String确认
type确认框的类型'success' | 'info' | 'warning' | 'danger'---
icon自定义气泡确认框图标String---
iconColor自定义图标颜色String---

Popconfirm Events

事件名说明类型
open气泡确认框打开时的回调() => void
opened气泡确认框打开后的回调() => void
close气泡确认框关闭时的回调() => void
closed气泡确认框关闭后的回调() => void
cancel点击取消按钮之后的回调() => void
confirm点击确认按钮之后的回调() => void

Popconfirm Slots

名称说明
default用作Floating的引用元素

源代码

组件

贡献者

Released under the MIT License.