HoverCard
指针停在用户名、链接上时弹出摘要卡片,不用点进去就能看个大概。停留 openDelay(缺省 500ms)才开,扫过去不会弹;离开 closeDelay(缺省 200ms)才收,留出从触发元素挪进卡片的时间。
用户名上的资料卡
这条会员记录由 @xiangwenke 在 10 月 9 日开通。
它只是捷径。 触屏没有悬停,键盘聚焦时会开但读屏不念卡片内容,所以卡片里不放唯一入口:触发元素本身要能点进完整页面,卡片里的信息在那个页面上也要有。要点开才看、里面有可操作内容的用 Popover,只是一句说明的用 Tooltip。
默认插槽是触发元素(落在插槽里的元素上,不额外包一层),#content 是卡片内容;宽度缺省 18rem,用 class 改。
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
side | "top" | "bottom" | "left" | "right" | undefined | "bottom" | — |
align | "end" | "start" | "center" | undefined | "center" | — |
sideOffset | number | undefined | 8 | 与触发元素的间距(px),缺省 8 |
openDelay | number | undefined | 500 | 指针停留多久才开(ms),缺省 500:扫过去不该弹 |
closeDelay | number | undefined | 200 | 离开多久才收(ms),缺省 200:留出从触发元素挪进卡片的时间 |
open | boolean | undefined | false | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:open | [value: boolean] | — |
Slots
| 插槽 | 说明 |
|---|---|
default | — |
content | — |