Popover 气泡卡片
展示比 Tooltip 更丰富的承载内容，常用于展示详细信息、表单提交或用户引导。
基础用法
通过 title 和 content 快速配置标准卡片。
基础用法
弹出位置
支持 12 个方向的弹出定位。
弹出位置
功能对齐 (Popconfirm)
Popover 支持像 Popconfirm 一样配置结构化的内容，包括图标、标题和描述。
功能对齐示例
触发方式
支持 hover、click、focus、contextmenu 多种触发方式。支持触发方式的组合，如 ['hover', 'click']。
触发方式
高级插槽内容
支持 header、content、footer 和 icon 插槽，可实现极富表现力的复杂 UI。
高级插槽内容
受控显隐
通过 v-model:visible 实现手动组件状态同步。
手动控制
在 Nuxt 中使用
Popover 组件完全支持 Nuxt 3/4 的 SSR 渲染。在 Nuxt 项目中使用时，组件会自动导入，无需手动注册。
Nuxt 中使用
SSR 注意事项：
- ✅ 完美支持服务端渲染 (SSR)，无水合错误
- ✅ 自动感知全局暗黑模式
- ✅ 支持所有的 Props 和 插槽
- ✅ 浮层容器自动 Teleport 至 body 确保层级正确
SSR 透明度
Popover 组件使用了 Backdrop-filter 亚克力效果，在 SSR 环境下会自动降级为纯色直到客户端激活，确保极致的载入性能。
API
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | 标题 | string | undefined |
description | 描述文案，和 Popconfirm 对齐 | string | undefined |
icon | 图标名称，和 Popconfirm 对齐 | string | undefined |
icon-color | 图标颜色 | string | undefined |
content | 内容文案 | string | undefined |
placement | 浮层位置 | Placement | 'bottom' |
trigger | 触发方式 | PopoverTrigger | PopoverTrigger[] | 'click' |
visible | 受控显隐状态 | boolean | null | null |
effect | 主题风格 | 'light' | 'dark' | string | 'light' |
disabled | 是否禁用 | boolean | false |
show-arrow | 是否显示箭头 | boolean | true |
show-after | 显示延迟，单位毫秒 | number | 0 |
hide-after | 隐藏延迟，单位毫秒 | number | 100 |
offset | 浮层偏移量 | [number, number] | [0, 12] |
width | 浮层宽度 | string | number | 'auto' |
max-height | 最大高度 | string | number | 'none' |
scrollable | 内容是否可滚动 | boolean | false |
interactive | 鼠标移入浮层后是否保持显示 | boolean | true |
match-trigger-width | 是否跟随触发器宽度 | boolean | false |
z-index | 浮层层级 | number | 2003 |
teleported | 是否挂载到 body | boolean | true |
popper-class | 自定义浮层类名 | string | '' |
popper-style | 自定义浮层样式 | StyleValue | {} |
transition | 过渡动画名称 | string | 'yh-popover-fade' |
persistent | 隐藏时是否保留 DOM | boolean | true |
theme-overrides | 组件级主题变量覆盖 | ComponentThemeVars | undefined |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| update:visible | 可见性状态改变时触发 | (visible: boolean) |
| show | 显示时触发 | - |
| hide | 隐藏时触发 | - |
Slots
| 插槽名 | 说明 |
|---|---|
default | 触发元素 |
header | 自定义头部/标题内容 |
content | 自定义主体内容 |
icon | 自定义图标区域 |
footer | 自定义底部操作区 |
Expose
| 名称 | 说明 | 类型 |
|---|---|---|
toggle | 手动切换显隐状态 | (val: boolean) => boolean |
visible | 当前是否可见 | Ref<boolean> |
主题变量 (CSS Variables)
组件支持 themeOverrides，但源码没有定义专属的组件级 CSS 变量表，外观主要由共享浮层主题令牌构成。
提示: Popover 深度集成底层 Tooltip 引擎，支持 12 个方向弹出，并自然适配 Nuxt SSR 场景。
类型导出
| 名称 | 说明 |
|---|---|
YhPopoverProps | 组件 Props 类型 |
YhPopoverEmits | 组件事件类型 |
YhPopoverSlots | 组件插槽类型 |
YhPopoverExpose | 组件 expose 类型 |
YhPopoverTrigger | 触发方式联合类型 |
YhPopoverInstance | 组件实例类型 |