---
url: https://ain.hmgf.hxcn.space/contribution/project-components/popover.md
description: HeroUI 风格浮层组件，支持箭头、颜色、位置、偏移、受控状态、表单、遮罩和自定义触发器。
---

# Popover 组件

`Popover` 适合做局部解释、短操作、表单补充和标题补全。

## 基础用法

```md
<Popover title="提示" placement="bottom" with-arrow>
  <template #trigger>
    <LinkButton text="点击查看提示" variant="soft" />
  </template>
  这里可以放短说明。
</Popover>
```

## With Arrow

## Colors

## Placements

## Offset

## Controlled

## Title Props

## With Form

## Backdrop

## Custom Motion

## Custom Trigger

## 在 Accordion 中使用

## Props

| 参数 | 类型 | 默认值 | 说明 | 示例 |
| --- | --- | --- | --- | --- |
| `open` | `boolean \| undefined` | `undefined` | 受控打开状态，配合 `v-model:open` 使用。 | `v-model:open="open"` |
| `defaultOpen` | `boolean` | `false` | 非受控初始打开状态。 | `:default-open="true"` |
| `trigger` | `click \| hover \| both` | `click` | 触发方式。 | `trigger="hover"` |
| `placement` | `top \| bottom \| left \| right` 等 | `bottom` | 浮层位置。 | `placement="top-start"` |
| `offset` | `number` | `8` | 与触发元素的间距。 | `:offset="0"` |
| `withArrow` | `boolean` | `false` | 是否显示箭头。 | `with-arrow` |
| `color` | `default \| primary \| success \| warning \| danger` | `default` | 浮层边框强调色。 | `color="warning"` |
| `title` | `string` | `''` | 浮层标题。 | `title="提示"` |
| `content` | `string` | `''` | 简单纯文本内容；复杂内容请用默认插槽。 | `content="完整标题"` |
| `titleClass` | `string` | `''` | 标题附加类名。 | `title-class="my-title"` |
| `panelClass` | `string` | `''` | 外层面板附加类名。 | `panel-class="my-panel"` |
| `bodyClass` | `string` | `''` | 内容区附加类名。 | `body-class="my-body"` |
| `triggerClass` | `string` | `''` | 触发器包裹层附加类名。 | `trigger-class="my-trigger"` |
| `backdrop` | `boolean \| soft \| blur` | `false` | 是否显示遮罩以及遮罩样式。 | `backdrop="blur"` |
| `disabled` | `boolean` | `false` | 禁用浮层。 | `:disabled="true"` |
| `motion` | `scale \| fade \| slide-up \| slide-down \| none` | `scale` | 过渡预设。 | `motion="slide-up"` |
| `enterFromClass` | `string` | `''` | 自定义进入起始类名。 | `enter-from-class="..."` |
| `enterActiveClass` | `string` | `''` | 自定义进入激活类名。 | `enter-active-class="..."` |
| `leaveToClass` | `string` | `''` | 自定义离开结束类名。 | `leave-to-class="..."` |
| `leaveActiveClass` | `string` | `''` | 自定义离开激活类名。 | `leave-active-class="..."` |