Popconfirm 气泡确认框
点击某个元素弹出一个简单的气泡确认框
ts
import { createApp } from 'vue'
import { ElPopconfirm } from '@szhn/dh-design-pc'
const app = createApp()
app.use(ElPopconfirm)展示位置
Popconfirm 提供 9 种展示位置。
基础用法
Popconfirm 的属性与 Popover 很类似， 因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。
自定义弹出框的内容
可以在 Popconfirm 中自定义内容。
多种让 Popconfirm 出现的方法
点击按钮触发事件
API
Attributes
| 属性名 | 说明 | 类型 | 默认 |
|---|---|---|---|
| title | 标题 | string | — |
| effect | Tooltip 主题，内置了 dark / light 两种 | enum / string | light |
| confirm-button-text | 确认按钮文字 | string | — |
| cancel-button-text | 取消按钮文字 | string | — |
| confirm-button-type | 确认按钮类型 | enum | primary |
| cancel-button-type | 取消按钮类型 | enum | text |
| icon | 自定义图标 | string / Component | QuestionFilled |
| icon-color | Icon 颜色 | string | #f90 |
| hide-icon | 是否隐藏 Icon | boolean | false |
| hide-after | 关闭时的延迟 | number | 200 |
| teleported | 是否将 popover 的下拉列表插入至 body 元素 | boolean | true |
| persistent | 当 popover 组件长时间不触发且 persistent 属性设置为 false 时, popover 将会被删除 | boolean | false |
| width | 弹层宽度，最小宽度 150px | string / number | 150 |
| tooltip | 继承自 Tooltip 的所有属性，但不包括：popper-class、popper-style、fallback-placements | — | — |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| confirm | 点击确认按钮时触发 | Function |
| cancel | 点击取消按钮时触发 | Function |
Slots
| 插槽名 | 说明 | 类型 |
|---|---|---|
| reference | 触发 Popconfirm 显示的 HTML 元素 | — |
| actions | 页脚的内容 | object |
暴露
| 方法名 | 详情 | Type |
|---|---|---|
| popperRef | el-popper 组件实例 | object |
| hide | hide popconfirm | Function |