Popover 悬浮弹窗
当元素获取焦点、鼠标悬浮或点击时,弹出显示相关信息的浮层。基于 BrConfigProvider 实现全局主题配置,支持多触发方式、自适应定位。
组件特性
- 🛠️ 多方向弹出:支持上下左右及其对齐偏移共 12 种方向,自动适应屏幕边缘。
- 🖱️ 多种触发方式:支持点击、悬浮、聚焦等多种触发方式。
- 🎨 主题定制:支持基于
BrConfigProvider的全局主题定制,以及基于 TailwindCSS 的局部样式覆盖。
基础用法
最基础的悬浮弹窗展示,通过点击触发。
Example
弹出位置
支持 placement 属性控制弹出位置,支持 12 种不同的方向。
Example
自定义触发方式
支持 click、hover 和 focus 触发方式,可通过 trigger 属性进行配置。
Hover over me
Example
主题定制
结合 BrConfigProvider 可以全局覆盖组件的默认样式,也可以通过 TailwindCSS 局部覆盖样式。
Example
加载与空状态
支持在弹窗内容中展示加载中 loading 和空数据 empty 状态。
Example
API 参考
BrPopover
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
open (v-model) | boolean | - | 受控模式下,弹窗的展开状态 |
defaultOpen | boolean | false | 非受控模式下,弹窗的默认展开状态 |
trigger | 'click' | 'hover' | 'focus' | 'manual' | 'click' | 触发方式 |
disabled | boolean | false | 是否禁用触发器 |
openDelay | number | 200 | 悬浮触发时的展开延迟(毫秒) |
closeDelay | number | 300 | 悬浮触发时的收起延迟(毫秒) |
BrPopoverContent
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
placement | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'bottom' | 弹窗出现的位置 |
sideOffset | number | 4 | 弹窗距离触发元素的偏移量 |
mask | boolean | false | 是否展示背景遮罩 |
loading | boolean | false | 是否处于加载态 |
empty | boolean | false | 是否为空内容态 |
closeStrategy | Array<'click-outside' | 'escape' | 'scroll'> | ['click-outside', 'escape'] | 触发关闭的策略。可配置滚动时关闭 ('scroll') |
BrPopoverTrigger
无特殊属性,通过 as-child 可以将事件委托给子元素(推荐使用)。
BrPopoverArrow
继承自 Radix Vue 的 PopoverArrow,可直接传递 class 进行样式覆盖(如 fill-popover 控制箭头颜色)。
BrPopoverClose
无特殊属性,用于包裹关闭弹窗的按钮,通过 as-child 可以将点击事件委托给子元素。