Popover 气泡卡片

基础用法

默认 click 触发，bottom 方向弹出。

带箭头

arrow 在弹出框边缘添加箭头，明确指向触发元素。

位置

placement 支持 12 个方向，与 Tooltip 一致。

用户卡片

点击头像弹出用户信息卡片，包含名称、邮箱、简介、关注数据与操作按钮。

努尔顿

前端工程师

组件结构

根元素 .my-popover 包裹触发元素（默认插槽），弹出面板 .my-popover__panel 通过 <transition> 控制显隐，内含标题、内容和可选箭头。

CSS 类名

类名	说明
.my-popover	根元素
.my-popover__panel	弹出面板
.my-popover__panel.is-arrow	显示箭头
.my-popover__title	面板标题
.my-popover__body	面板内容区
.my-popover__arrow	箭头元素
.my-popover--top	上方弹出
.my-popover--top-start	上左弹出
.my-popover--top-end	上右弹出
.my-popover--bottom	下方弹出
.my-popover--bottom-start	下左弹出
.my-popover--bottom-end	下右弹出
.my-popover--left	左侧弹出
.my-popover--left-start	左上弹出
.my-popover--left-end	左下弹出
.my-popover--right	右侧弹出
.my-popover--right-start	右上弹出
.my-popover--right-end	右下弹出

API

Popover Props

属性	说明	类型	默认值
title	卡片标题	string	—
placement	弹出位置（12 方向）	'top' | 'top-start' | ... | 'right-end'	'bottom'
trigger	触发方式	'click' | 'hover' | 'focus' | 'manual'	'click'
arrow	是否显示箭头	boolean	false
modelValue / v-model	手动控制显示/隐藏	boolean	—
width	面板宽度	string | number	—

Popover Slots

名称	说明
default	触发元素
title	自定义标题
content	卡片内容