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

HoverCard 悬停卡片

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

基础用法

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

背景

<script setup lang="ts">
import { CfHoverCard } from '@chufix-design/vue';
</script>

<template>
  <CfHoverCard>
    <span style="background: var(--bg-2); padding: 4px 8px; border-radius: var(--r-3); cursor: pointer;">@jane.l</span>
    <template #content>
      <div style="display: flex; gap: 10px;">
        <span style="width: 36px; height: 36px; border-radius: 50%; background: var(--accent-1); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-on-accent); font-weight: 500;">JL</span>
        <div>
          <div style="font-weight: 500; color: var(--fg-1);">Jane Liu</div>
          <div style="font-size: 11px; color: var(--fg-3); font-family: var(--font-mono);">jane.l@example.com</div>
          <div style="font-size: 12px; color: var(--fg-2); margin-top: 4px;">Backend · Payments · UTC+8</div>
        </div>
      </div>
    </template>
  </CfHoverCard>
</template>

<script setup>
import { CfHoverCard } from '@chufix-design/vue';
</script>

<template>
  <CfHoverCard>
    <span style="background: var(--bg-2); padding: 4px 8px; border-radius: var(--r-3); cursor: pointer;">@jane.l</span>
    <template #content>
      <div style="display: flex; gap: 10px;">
        <span style="width: 36px; height: 36px; border-radius: 50%; background: var(--accent-1); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-on-accent); font-weight: 500;">JL</span>
        <div>
          <div style="font-weight: 500; color: var(--fg-1);">Jane Liu</div>
          <div style="font-size: 11px; color: var(--fg-3); font-family: var(--font-mono);">jane.l@example.com</div>
          <div style="font-size: 12px; color: var(--fg-2); margin-top: 4px;">Backend · Payments · UTC+8</div>
        </div>
      </div>
    </template>
  </CfHoverCard>
</template>

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

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

4 种 placement

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

背景

topbottomleftright

<script setup lang="ts">
import { CfHoverCard } from '@chufix-design/vue';
const placements = ['top', 'bottom', 'left', 'right'] as const;
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 60px 16px;">
    <CfHoverCard v-for="p in placements" :key="p" :placement="p" :open-delay="200">
      <span style="background: var(--bg-2); padding: 6px 10px; border-radius: var(--r-3); cursor: pointer; text-align: center; display: inline-block;">{{ p }}</span>
      <template #content>
        <div style="padding: 4px 0;">
          <div style="font-weight: 500; color: var(--fg-1);">{{ p }} 弹出</div>
          <div style="font-size: 12px; color: var(--fg-2); margin-top: 2px;">200ms 延迟</div>
        </div>
      </template>
    </CfHoverCard>
  </div>
</template>

<script setup>
import { CfHoverCard } from '@chufix-design/vue';
const placements = ['top', 'bottom', 'left', 'right'];
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 60px 16px;">
    <CfHoverCard v-for="p in placements" :key="p" :placement="p" :open-delay="200">
      <span style="background: var(--bg-2); padding: 6px 10px; border-radius: var(--r-3); cursor: pointer; text-align: center; display: inline-block;">{{ p }}</span>
      <template #content>
        <div style="padding: 4px 0;">
          <div style="font-weight: 500; color: var(--fg-1);">{{ p }} 弹出</div>
          <div style="font-size: 12px; color: var(--fg-2); margin-top: 2px;">200ms 延迟</div>
        </div>
      </template>
    </CfHoverCard>
  </div>
</template>

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

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

API

属性	类型	默认值	说明
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	位置
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	220 / 280 / 360 px
`openDelay`	`number`	`700`	显示延迟 ms
`closeDelay`	`number`	`200`	隐藏延迟 ms（防闪）
`disabled`	`boolean`	`false`