Popover 气泡卡片

点击/悬停触发的气泡卡片，支持标题 + 内容区域，通过 Teleport 挂载到 body，支持自动翻转。

基础用法

点击触发，内容通过 #content slot 传入

vue

<script setup lang="ts">
import { APopover, AButton } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
    <APopover title="卡片标题">
      <template #content>
        <p style="margin: 0;">这是气泡卡片的内容区域。</p>
        <p style="margin: 8px 0 0; color: var(--aui-text-2, #4a5270);">可以放置任意内容。</p>
      </template>
      <AButton>点击展示</AButton>
    </APopover>
    <APopover title="悬停触发" trigger="hover">
      <template #content>悬停触发的 Popover 内容。</template>
      <AButton>Hover</AButton>
    </APopover>
  </div>
</template>

弹出方向

支持 top / bottom / left / right 四个方向

vue

<script setup lang="ts">
import { APopover, AButton } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
    <APopover title="顶部" placement="top">
      <template #content>Top Popover</template>
      <AButton>Top</AButton>
    </APopover>
    <APopover title="底部" placement="bottom">
      <template #content>Bottom Popover</template>
      <AButton>Bottom</AButton>
    </APopover>
    <APopover title="左侧" placement="left">
      <template #content>Left Popover</template>
      <AButton>Left</AButton>
    </APopover>
    <APopover title="右侧" placement="right">
      <template #content>Right Popover</template>
      <AButton>Right</AButton>
    </APopover>
  </div>
</template>

API

Props

属性	类型	默认值	说明
title	string	—	标题，不传则不显示标题区
placement	PopoverPlacement	'bottom'	弹出方向
trigger	PopoverTrigger	'click'	触发方式：click | hover
open	boolean	—	受控显示状态
defaultOpen	boolean	false	默认显示状态（非受控）
onOpenChange	(open: boolean) => void	—	显示状态变化回调
offset	number	8	弹层与触发元素的间距（px）
className	string	—	弹层自定义 class
style	object	—	弹层自定义样式

Slots

插槽	说明
default	触发元素
content	弹层内容区（必填）

类型

type PopoverPlacement = "top" | "bottom" | "left" | "right";
type PopoverTrigger = "click" | "hover";