开发预览 更新于 2026-05-10

HoverCard 悬停卡片

长延迟(700ms)的丰富预览卡,适合用户名、变量、请求等富信息悬停预览。

基础用法

包裹任意触发元素,content 槽放卡片内容。延迟与位置可配。

<CfHoverCard placement="bottom">
<span>@jane.l</span>
<template #content>…</template>
</CfHoverCard>
<CfHoverCard placement="bottom" trigger={<span>@jane.l</span>}>

</CfHoverCard>

4 种 placement

top / bottom / left / right 自动计算位置;这里用 200ms 短延迟方便演示。

topbottomleftright
<CfHoverCard placement="top">…</CfHoverCard>
<CfHoverCard placement="top" trigger={…}>…</CfHoverCard>

API

属性类型默认值说明
placement'top' | 'bottom' | 'left' | 'right''bottom'位置
size'sm' | 'md' | 'lg''md'220 / 280 / 360 px
openDelaynumber700显示延迟 ms
closeDelaynumber200隐藏延迟 ms(防闪)
disabledbooleanfalse

反馈与讨论

HoverCard 悬停卡片 的讨论

0
0 / 600
一键发送
正在加载评论...