Skip to content

Popover 悬浮弹窗

当元素获取焦点、鼠标悬浮或点击时,弹出显示相关信息的浮层。基于 BrConfigProvider 实现全局主题配置,支持多触发方式、自适应定位。

组件特性

  • 🛠️ 多方向弹出:支持上下左右及其对齐偏移共 12 种方向,自动适应屏幕边缘。
  • 🖱️ 多种触发方式:支持点击、悬浮、聚焦等多种触发方式。
  • 🎨 主题定制:支持基于 BrConfigProvider 的全局主题定制,以及基于 TailwindCSS 的局部样式覆盖。

基础用法

最基础的悬浮弹窗展示,通过点击触发。

Example

弹出位置

支持 placement 属性控制弹出位置,支持 12 种不同的方向。

Example

自定义触发方式

支持 clickhoverfocus 触发方式,可通过 trigger 属性进行配置。

Hover over me
Example

主题定制

结合 BrConfigProvider 可以全局覆盖组件的默认样式,也可以通过 TailwindCSS 局部覆盖样式。

Example

加载与空状态

支持在弹窗内容中展示加载中 loading 和空数据 empty 状态。

Example

API 参考

BrPopover

属性类型默认值说明
open (v-model)boolean-受控模式下,弹窗的展开状态
defaultOpenbooleanfalse非受控模式下,弹窗的默认展开状态
trigger'click' | 'hover' | 'focus' | 'manual''click'触发方式
disabledbooleanfalse是否禁用触发器
openDelaynumber200悬浮触发时的展开延迟(毫秒)
closeDelaynumber300悬浮触发时的收起延迟(毫秒)

BrPopoverContent

属性类型默认值说明
placement'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end''bottom'弹窗出现的位置
sideOffsetnumber4弹窗距离触发元素的偏移量
maskbooleanfalse是否展示背景遮罩
loadingbooleanfalse是否处于加载态
emptybooleanfalse是否为空内容态
closeStrategyArray<'click-outside' | 'escape' | 'scroll'>['click-outside', 'escape']触发关闭的策略。可配置滚动时关闭 ('scroll')

BrPopoverTrigger

无特殊属性,通过 as-child 可以将事件委托给子元素(推荐使用)。

BrPopoverArrow

继承自 Radix Vue 的 PopoverArrow,可直接传递 class 进行样式覆盖(如 fill-popover 控制箭头颜色)。

BrPopoverClose

无特殊属性,用于包裹关闭弹窗的按钮,通过 as-child 可以将点击事件委托给子元素。