Popconfirm 气泡确认框
作用类似于Confirm 确认, 最大的区别在于触发的方式不相同。 Confirm属于函数式触发, 而Popconfirm属于组件触发。 在表现上,Popconfirm更加优雅!
基础用法
通过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 | 气泡确认框出现/消失过渡 | String | fade |
| openDelay | 气泡确认框打开延时 | Number | 0 |
| closeDelay | 气泡确认框关闭延时 | Number | 0 |
| disabled | 是否禁用气泡确认框 | Boolean | false |
| offset | 气泡确认框的偏移量 | Number | 5 |
| closeOnClickBody | 是否在点击其他元素时关闭 | Boolean | false |
| openOnMounted | 是否在挂载时立即显示 | Boolean | false |
| teleported | 是否瞬移到body元素下 | Boolean | true |
| showArrow | 是否展示箭头 | Boolean | false |
| floatingClass | 气泡确认框默认会嵌套一层div,设置这层div的类名 | String | --- |
| reference | 解耦模式下的引用元素 | Ref<MaybeElement> | --- |
| quickTrack | 是否开启快速跟踪,若气泡确认框跟不上引用元素的改变开启此项 | Boolean | false |
| 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的引用元素 |