使用方法

Thumbnail 是 64px 的预览。没有 src 时是占位图。只有 isLoading、没有 src 时是骨架。两者都有时，图片上盖一层加载指示。监听 click 后，预览变成按钮。监听 remove 后，出现关闭按钮。

showRemoveOn 默认是 hover。键盘焦点时也会出现，粗指针设备上则一直可见。always 让它一直可见。isDisabled 会把缩略图调淡，并忽略点击和移除。

label 是无障碍名称，不会画在方块上。提示和移除按钮都会用到它。

<script setup lang="ts">
import { Thumbnail } from '@astryx-vue/core/Thumbnail'
</script>

<template>
  <Thumbnail src="/photo.jpg" alt="雪山" label="snowy-peaks.jpg" />
</template>

建议

建议	做法
推荐	alt 写图片内容，label 写移除时能认出来的文件名。
推荐	指针可能很粗，或者移除是主要操作时，用 showRemoveOn="always"。
推荐	文件还没有预览时先放占位，有地址后再传 src。
避免	把文件名画进方块。提示里已经有 label。
避免	在 isDisabled 或 isLoading 时还指望 click 会触发。

解剖

部分	说明
图片	预览图，按正方形、cover 的方式显示。
占位	没有 src 时显示的图片剪影图标。
移除按钮	叠在右上角的关闭按钮。什么时候出现由 showRemoveOn 决定，默认是悬停。点击会发出 remove。它坐在固定的 --color-overlay 遮罩上，图标用 --color-on-dark，好在任何图片上都看得见。
上传遮罩	半透明遮罩加转圈。isLoading 为真、并且已经有 src 预览时显示。
骨架	isLoading 为真、并且没有 src 时的闪烁动画。

示例

Thumbnail — 禁用

Enabled

Disabled

禁用后透明度降低，移除按钮和点击都不再响应。

Thumbnail — 图库

Click to preview, dismiss to remove

一排可点击的缩略图。适合附件列表：点开预览，点关闭移除。

Thumbnail — 可移除

Remove button adapts contrast to image luminance

右上角的移除按钮在深色和浅色图片上都看得见。

Thumbnail — 状态

Lifecycle: empty → uploading → processing → loaded

Placeholder

Skeleton

Uploading

Loaded

占位、骨架、上传中和已加载并排，对应从空到完成的过程。