插槽实现卡片悬浮层的关键是职责分离：v-slot:trigger定义触发区，v-slot:content承载主内容，v-slot:actions提供右上角操作，v-slot:footer展示底部信息；统一由isHovered控制显隐，动态定位，透传card-data与方法，并适配桌面端hover与移动端click交互。
用插槽实现卡片组件的悬浮层内容分发，关键是把“悬停时显示什么”交给使用者决定，组件只负责触发时机、定位逻辑和交互透传。不是写死一个 tooltip 或 popover，而是按功能区域预留多个具名插槽，让调用方自由注入标题、操作按钮、状态提示或自定义动效。
按用途拆解具名插槽
悬浮层需视觉清晰、职责分明，建议划分以下四类插槽：
- v-slot:trigger：定义触发区域（如图标、文字、整个卡片），默认是卡片主体，支持自定义点击/悬停入口
- v-slot:content：主悬浮内容区，承载富文本、列表、表单控件等核心信息
- v-slot:actions：右上角浮动操作，适合放关闭 ×、复制链接、设为默认等快捷按钮
- v-slot:footer：底部固定栏，用于展示时间戳、来源标识、小字说明等辅助信息
控制显隐与精准定位
插槽本身不带行为，必须由组件内部统一驱动：
- 用响应式变量 isHovered 控制整体悬浮层渲染，所有插槽外层统一加
v-if="isHovered" - 悬浮容器设
position: absolute; z-index: 1000;，并根据 placement（如 top、bottom、right）动态计算偏移量 -
content插槽外层加max-width: 320px; word-break: break-word;防止长文本溢出 -
actions容器设top: 8px; right: 8px;，footer设bottom: 8px; left: 12px; right: 12px;
向插槽透传上下文与能力
悬浮内容要能真正响应，不能只是静态展示：
- 通过
:card-data="currentCard"把卡片元数据（id、title、status、updatedAt）传入各插槽 - 暴露方法如
:close="handleClose"、:copy="handleCopy"，供插槽内按钮直接调用 - 在
#actions中可直接写：<button>×</button> - 支持作用域插槽语法：
<template carddata><p>{{ cardData.title }}</p></template>
适配不同交互场景
悬浮层在桌面端和移动端行为差异大，需差异化处理：
- 桌面端默认 hover 触发，延迟 200ms 显示，300ms 淡入动画；移出后 100ms 延迟隐藏，避免误触
- 移动端禁用 hover，改用 click/tap 触发，并自动添加
@touchstart.stop阻止事件穿透 - 所有可操作项（如关闭按钮）添加
tabindex="0"，支持键盘聚焦与 Enter/Space 触发 - 当卡片处于 disabled 状态时，自动禁用悬浮触发，且
trigger插槽内元素加aria-disabled="true"
