Popconfirm 气泡确认框
点击元素弹出气泡内容，进行二次确认。常用于危险提示、重要开关等场景。
基础用法
通过 title 配置简单的提示信息。
基础用法
弹出位置
支持 12 个方向的弹出定位，通过 placement 属性控制。
弹出位置
个性化配置
自由定制按钮文字、类型或隐藏特定元素。
个性化配置
高级特性
YH-UI 独有的“按钮位置反置”和“不再提示”状态反馈。
高级特性
异步关闭
结合 before-confirm 属性轻松实现接口拦截逻辑。
异步拦截
自定义插槽
支持通过 title 和 description 插槽自定义复杂的富文本内容。
复杂内容插槽
隐藏小三角
可以通过 show-arrow 属性控制气泡框是否显示指示三角。
小三角展示
主题外观
通过修改 CSS 变量，可以轻松实现组件的样式定制。例如，通过 popper-style 覆盖局部的主题变量。
主题定制
在 Nuxt 中使用
YhPopconfirm 完美支持 Nuxt 3。得益于基于 Tooltip 的极速定位引擎，在 SSR 环境下依然具有极佳的表现。
Nuxt 开发演示
只需在 nuxt.config.ts 加入模块配置：
ts
export default defineNuxtConfig({ modules: ['@yh-ui/nuxt'] })API
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | string | - |
| description | 描述内容 | string | - |
| confirm-button-text | 确认按钮文字 | string | 确定 |
| cancel-button-text | 取消按钮文字 | string | 取消 |
| confirm-button-type | 确认按钮类型 | string | primary |
| cancel-button-type | 取消按钮类型 | string | default |
| icon | 图标名称 | string | warning |
| icon-color | 图标颜色 | string | #faad14 |
| hide-icon | 是否隐藏图标 | boolean | false |
| hide-cancel | 是否隐藏取消按钮 | boolean | false |
| width | 宽度 | string / number | 180 |
| placement | 出现位置 | TooltipPlacement | 'top' |
| visible | 手动控制可见性 | boolean | null | null |
| offset | 偏移量 [skidding, distance] | array | [0, 12] |
| disabled | 是否禁用 | boolean | false |
| show-arrow | 是否显示小三角 | boolean | true |
| teleported | 是否挂载至 body | boolean | true |
| z-index | 层级 | number | 2000 |
| popper-class | 自定义弹出层类名 | string | - |
| popper-style | 自定义弹出层样式 | object | {} |
| before-confirm | 确认前的生命周期钩子 | function | - |
| swap-buttons | 是否交换按钮位置 | boolean | false |
| show-dont-ask-again | 是否显示不再提示勾选框 | boolean | false |
| dont-ask-again-text | “不再提示”的文本内容 | string | 不再提示 |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 触发弹出层的目标元素 |
| icon | 自定义图标 |
| title | 自定义标题 |
| description | 自定义描述内容 |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| confirm | 点击确认按钮触发 | (isSet: boolean) |
| cancel | 点击取消按钮触发 | - |
| update:visible | 可见性状态改变时触发 | (visible: boolean) |
主题变量 (CSS Variables)
| 变量名 | 默认值 | 描述 |
|---|---|---|
--yh-popconfirm-title | #1d1d1f | 标题文字颜色 |
--yh-popconfirm-desc | #424245 | 描述文字颜色 |
--yh-tooltip-bg-color | rgba(255, 255, 255, 0.88) | 气泡背景色 |
--yh-tooltip-border-color | rgba(0, 0, 0, 0.08) | 气泡边框颜色 |