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 | - |
| description | 描述文字 (同 Popconfirm) | string | - |
| icon | 图标名称 (同 Popconfirm) | string | - |
| icon-color | 图标颜色 | string | - |
| content | 内容内容文字 | string | - |
| placement | 弹出位置 | Placement | 'bottom' |
| visible | 手动控制可见性 | boolean | null | null |
| trigger | 触发方式 | PopoverTrigger | PopoverTrigger[] | 'click' |
| effect | 主题风格 | 'light' | 'dark' | 'light' |
| disabled | 是否禁用 | boolean | false |
| show-arrow | 是否显示小三角 | boolean | true |
| show-after | 出现延迟 (ms) | number | 0 |
| hide-after | 隐藏延迟 (ms) | number | 100 |
| offset | 偏移量 | [number, number] | [0, 12] |
| width | 弹出层宽度 | string | number | 'auto' |
| max-height | 最大高度 (配合 scrollable) | string | number | 'none' |
| scrollable | 内容是否可滚动 | boolean | false |
| interactive | 是否允许鼠标进入提示框 | boolean | true |
| visible | 手动控制可见性 | boolean | null | null |
| match-trigger-width | 是否跟随触发器宽度 | boolean | false |
| z-index | 层级 | number | 2003 |
| teleported | 是否挂载至 body | boolean | true |
| popper-class | 弹出层自定义类名 | string | - |
| popper-style | 弹出层自定义样式 | CSSProperties | {} |
| transition | 动画名称 | string | 'yh-popover-fade' |
| persistent | 隐藏时是否持久化 DOM | boolean | true |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| update:visible | 可见性状态改变时触发 | (visible: boolean) |
| show | 显示时触发 | - |
| hide | 隐藏时触发 | - |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 触发元素 |
| header | 自定义头部/标题内容 |
| content | 自定义主体内容 (会覆盖 content 属性) |
| icon | 自定义图标 |
| footer | 自定义底部操作区 |
Expose
| 名称 | 说明 | 类型 |
|---|---|---|
| toggle | 手动切换显隐状态 | (val: boolean) => void |
| visible | 当前是否可见 | Ref<boolean> |
主题变量 (CSS Variables)
组件支持通过以下 CSS 变量深度定制外观。所有颜色变量已与全局主题系统对接，自动支持暗黑模式：
| 变量名 | 默认值 | 描述 |
|---|---|---|
--yh-popover-bg | var(--yh-bg-color-overlay) | 气泡背景色 (暗黑模式下自动切换) |
--yh-popover-border | var(--yh-border-color-light) | 边框颜色 |
--yh-popover-text | var(--yh-text-color-primary) | 主要文字颜色 |
--yh-popover-text-secondary | var(--yh-text-color-secondary) | 次要文字颜色 |
--yh-popover-radius | var(--yh-radius-lg) | 气泡圆角 |
--yh-popover-shadow | var(--yh-shadow-lg) | 气泡阴影 |
--yh-popover-title-size | var(--yh-font-size-md) | 标题字号 |
提示: Popover 深度集成底层 Tooltip 引擎，性能极佳，支持 12 个方向弹出且完美适配 Nuxt SSR 方案。