Popover 弹出框
用于在不打断用户流程的情况下展示补充信息和操作内容，支持标题、富文本内容、不同触发方式与位置控制。
何时使用
- 需要在不打断用户流程的情况下展示补充信息和操作内容
- 支持标题、富文本内容、不同触发方式与位置控制
- 需要展示比 Tooltip 更复杂的内容和操作
基本用法
最简单的用法，点击触发显示弹出框。
悬停触发
鼠标悬停时显示弹出框。
自定义内容与标题插槽
支持自定义标题和内容插槽，可以插入任意 Vue 组件。
位置与主题
支持 12 个方向的位置和两种主题样式。
受控显示
通过 v-model 或 visible 属性手动控制弹出框的显示状态。
右键菜单触发
支持右键菜单触发方式。
虚拟触发
支持虚拟元素触发，适用于触发元素和展示内容分离的场景。
嵌套操作
可以在 Popover 中嵌套其他组件和操作。
自动关闭
设置自动关闭时间，弹出框会在指定时间后自动隐藏。
API
Popover Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 标题文本，也可以通过 slot#title 传入 | string | — | — |
| content | 显示的内容，也可以通过 slot#content 传入 | string | — | — |
| placement | Popover 的出现位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| effect | 默认提供的主题 | string | dark/light | light |
| visible / v-model:visible | 状态是否可见 | boolean | — | false |
| disabled | Popover 是否可用 | boolean | — | false |
| show-arrow | 是否显示 Popover 箭头 | boolean | — | true |
| trigger | 触发方式 | string | hover/focus/click/manual/contextmenu | click |
| show-after | 延迟出现，单位毫秒 | number | — | 0 |
| hide-after | 延迟关闭，单位毫秒 | number | — | 200 |
| popper-class | 为 Popover 的 popper 添加类名 | string | — | — |
| offset | 出现位置的偏移量 | number | — | 4 |
| raw-content | 是否将 content 作为 HTML 字符串处理 | boolean | — | false |
| enterable | 鼠标是否可进入到 popover 中 | boolean | — | true |
| hide-on-click-outside | 是否在点击外部时隐藏 | boolean | — | true |
| close-on-esc | 是否支持 ESC 键关闭 | boolean | — | true |
| aria-label | 屏幕阅读器标签 | string | — | — |
| width | 弹层宽度 | number | string | — |
| transition | 定义渐变动画 | string | — | ccui-popover-fade |
| auto-close | 自动关闭时间，单位毫秒 | number | — | 0 |
| tabindex | Popover 组件的 tabindex | number | string | — |
| teleported | 是否将 popover 插入至 body 元素 | boolean | — | true |
| persistent | 是否持久化 | boolean | — | true |
| virtual-triggering | 是否启用虚拟触发器 | boolean | — | false |
| virtual-ref | 虚拟触发器的参照元素 | HTMLElement | — | — |
| trigger-keys | 键盘触发按键 | string[] | — | ['Enter', 'Space'] |
Popover Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| before-show | 显示前触发 | — |
| show | 显示时触发 | — |
| before-hide | 隐藏前触发 | — |
| hide | 隐藏时触发 | — |
| update:visible | 状态变更时触发 | visible |
| before-enter | 显示动画播放前触发 | — |
| after-enter | 显示动画播放后触发 | — |
| before-leave | 隐藏动画播放前触发 | — |
| after-leave | 隐藏动画播放后触发 | — |
Popover Slots
| 插槽名 | 说明 |
|---|---|
| default | Popover 触发 & 引用的元素 |
| title | 自定义标题 |
| content | 自定义内容 |
Popover Exposes
| 方法名 | 说明 | 类型 |
|---|---|---|
| hide | 隐藏弹出框 | () => void |