BrutxUI

简体中文

English

简体中文

English

外观

Popover 弹出层 ​

新粗野主义风格的弹出层组件，用于显示锚定到触发元素的浮动内容。基于 reka-ui 的 PopoverRoot 构建，支持模态/非模态模式、自定义锚点定位。

预览 ​

Preview

基础用法

对齐方式 (align)

偏移距离 (sideOffset=20)

安装 ​

pnpm dlx brutx-vue@latest add popover

用法 ​

vue
<script setup>
import { PopoverRoot as Popover, PopoverTrigger, PopoverAnchor } from 'reka-ui'
import { PopoverContent, Button } from 'brutx-ui-vue'
</script>

<template>
    <Popover>
        <PopoverTrigger as-child>
            <Button variant="outline">Open Popover</Button>
        </PopoverTrigger>
        <PopoverContent>
            <div class="grid gap-4">
                <div class="space-y-2">
                    <h4 class="font-black leading-none">Dimensions</h4>
                    <p class="text-sm text-brutal-muted-foreground">
                        Set the dimensions for the layer.
                    </p>
                </div>
            </div>
        </PopoverContent>
    </Popover>
</template>

子组件 ​

组件说明
Popover根组件（从 reka-ui 的 PopoverRoot 重新导出）
PopoverTrigger打开弹出层的按钮
PopoverContent弹出层内容面板
PopoverAnchor用于定位的锚点元素

API 参考 ​

Popover

Popover — 属性
名称类型默认值说明
defaultOpen
boolean | undefined
—
非受控模式下首次渲染时的打开状态；省略时由 Reka UI 原语使用其默认关闭状态。
详情

声明类型

boolean | undefined

字面量

  • false
  • true

默认值详情

未声明默认值
—

来源

Popover.vue

packages/ui/src/components/popover/Popover.vue

open
boolean | undefined
—
受控的打开状态；监听 update:open 并回写该属性以保持同步。
详情

声明类型

boolean | undefined

字面量

  • false
  • true

默认值详情

未声明默认值
—

来源

Popover.vue

packages/ui/src/components/popover/Popover.vue

modal
boolean | undefined
—
启用模态行为时禁用外部元素交互，并将屏幕阅读器关注限制在弹出内容中。
详情

声明类型

boolean | undefined

字面量

  • false
  • true

默认值详情

未声明默认值
—

来源

Popover.vue

packages/ui/src/components/popover/Popover.vue

Popover — 事件
名称签名或类型说明
@update:open
[value: boolean]
打开状态变化时发出新布尔值，用于受控模式更新。
详情

声明类型

[value: boolean]

字面量

  • false
  • true

来源

Popover.vue

packages/ui/src/components/popover/Popover.vue

Popover — 插槽
名称签名或类型说明
#default
{}
Popover 内部的触发器、内容面板及其他 Reka UI 子原语。
详情

声明类型

{}

来源

Popover.vue

packages/ui/src/components/popover/Popover.vue

PopoverContent

PopoverContent — 属性
名称类型默认值说明
align
"center" | "start" | "end" | undefined
"center"
内容面板相对于触发器的对齐位置。
详情

声明类型

"center" | "start" | "end" | undefined

字面量

  • "center"
  • "end"
  • "start"

默认值详情

声明
'center'

来源: packages/ui/src/components/popover/PopoverContent.vue

解析值
"center"

来源

PopoverContent.vue:17

packages/ui/src/components/popover/PopoverContent.vue

sideOffset
number | undefined
8
内容面板与触发器之间的间距，单位为像素。
详情

声明类型

number | undefined

默认值详情

声明
floatingContentSideOffsets.popover

来源: packages/ui/src/components/popover/PopoverContent.vue

解析值
8

来源

PopoverContent.vue:18

packages/ui/src/components/popover/PopoverContent.vue

collisionPadding
number | Partial<Record<"right" | "bottom" | "left" | "top", number>> | undefined
8
浮层避让边界的内缩量；可传统一数值或按上、右、下、左分别设置。
详情

声明类型

number | Partial<Record<"right" | "bottom" | "left" | "top", number>> | undefined

默认值详情

声明
floatingContentSideOffsets.popover

来源: packages/ui/src/components/popover/PopoverContent.vue

解析值
8

来源

PopoverContent.vue:19

packages/ui/src/components/popover/PopoverContent.vue

class
string | undefined
undefined
追加到 Reka UI 浮层内容元素的 CSS 类。
详情

声明类型

string | undefined

默认值详情

声明
undefined

来源: packages/ui/src/components/popover/PopoverContent.vue

解析值
undefined

来源

PopoverContent.vue:20

packages/ui/src/components/popover/PopoverContent.vue

PopoverContent — 插槽
名称签名或类型说明
#default
{}
弹出面板中的内容。
详情

声明类型

{}

来源

PopoverContent.vue

packages/ui/src/components/popover/PopoverContent.vue

PopoverTrigger

PopoverTrigger — 属性
名称类型默认值说明
asChild
boolean | undefined
—
将触发器的属性和交互行为合并到唯一子元素上。
详情

声明类型

boolean | undefined

字面量

  • false
  • true

默认值详情

未声明默认值
—

来源

PopoverTrigger.vue

packages/ui/src/components/popover/PopoverTrigger.vue

as
AsTag | Component | undefined
—
选择触发器渲染的 HTML 标签或组件；asChild 启用时由子元素决定渲染目标。
详情

声明类型

AsTag | Component | undefined

字面量

  • "a"
  • "button"
  • "div"
  • "form"
  • "h2"
  • "h3"
  • "img"
  • "input"
  • "label"
  • "li"
  • "nav"
  • "ol"
  • "p"
  • "span"
  • "svg"
  • "template"
  • "ul"

默认值详情

未声明默认值
—

来源

PopoverTrigger.vue

packages/ui/src/components/popover/PopoverTrigger.vue

PopoverTrigger — 插槽
名称签名或类型说明
#default
{}
触发器的子内容，通常是按钮或链接。
详情

声明类型

{}

来源

PopoverTrigger.vue

packages/ui/src/components/popover/PopoverTrigger.vue

Reka UI 原语的扩展能力 ​

Popover 包装 Reka UI 的 PopoverRoot；PopoverTrigger 和 PopoverContent 包装对应原语。PopoverAnchor 仍从 reka-ui 导入。上方 API 展示本地组件声明的成员；PopoverContent 将未声明的 Vue 属性和事件监听器透传给 Reka UI 原语，包括 openAutoFocus、closeAutoFocus、pointerDownOutside、interactOutside、escapeKeyDown 和 focusOutside。

可访问性 ​

  • 键盘操作：按 Escape 关闭弹出层
  • ARIA 属性：弹出层使用 role="dialog" 语义，自动关联 aria-labelledby 到触发器
  • 焦点管理：弹出层打开时自动聚焦
  • 交互行为：点击外部区域关闭弹出层；模态模式下禁用与外部元素的交互

与 Popconfirm 的关系 ​

Popconfirm 气泡确认框 本质上是 Popover + 确认/取消按钮的组合封装。它内部直接使用 Popover/PopoverTrigger/PopoverContent，并附加了 TriangleAlert 警告图标和确认/取消按钮逻辑。

何时使用 Popconfirm ​

  • 只需要简单的"确认/取消"二选一操作
  • 希望开箱即用，不需要自行组装按钮和事件
  • 需要一致的危险操作确认体验

何时使用 Popover 手动组合 ​

  • 需要自定义按钮文案、样式或布局
  • 需要在弹出层中放置表单、列表等复杂内容
  • 需要更细粒度地控制打开/关闭时机
vue
<!-- Popconfirm：一行搞定确认操作 -->
<Popconfirm title="确定删除？" @confirm="handleDelete">
    <Button variant="destructive">删除</Button>
</Popconfirm>

<!-- Popover 手动组合：完全自定义 -->
<Popover>
    <PopoverTrigger as-child>
        <Button variant="outline">自定义</Button>
    </PopoverTrigger>
    <PopoverContent>
        <!-- 任意内容：表单、列表、自定义按钮等 -->
    </PopoverContent>
</Popover>

蛮力铸就。

© 2026 BrutxUI · MIT License