ScratchCard 刮刮卡
新粗野主义风格的刮刮卡组件，使用 HTML5 Canvas 覆盖在底稿内容上方，绘制斑驳条纹层。用户用鼠标/手指擦除一定面积后，Canvas 淡出并销毁，完全露出插槽中的 Vue 内容。
预览
🎉 恭喜中奖！
自定义底色
大笔刷 (brushRadius=40)
大笔刷
渐隐时长 (fadeDuration=1000ms)
慢速渐隐
手动揭示 (revealAll)
一键揭示
安装
pnpm dlx brutx-vue@latest add scratch-card用法
<script setup>
import { ScratchCard } from 'brutx-ui-vue'
</script>
<template>
<ScratchCard class="w-full max-w-sm h-48">
<div class="flex items-center justify-center h-full bg-brutal-accent">
<p class="text-2xl font-black">🎉 恭喜中奖！</p>
</div>
</ScratchCard>
</template>自定义覆盖层
默认绘制 Neobrutalist 双色条纹图案（--brutal-primary + --brutal-secondary）。可通过 overlayColor prop 设置纯色覆盖层：
<ScratchCard overlay-color="#FFE66D">
<p>底稿内容</p>
</ScratchCard>程序化控制
<script setup>
import { ref } from 'vue'
import { ScratchCard } from 'brutx-ui-vue'
const scratchCardRef = ref()
</script>
<template>
<ScratchCard ref="scratchCardRef" />
<button @click="scratchCardRef?.revealAll()">全部揭开</button>
</template>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
percentage | number | undefined | 50 | 达到此已刮开面积百分比时自动完成揭示；默认阈值为 50。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/scratch-card/ScratchCard.vue | |||
brushRadius | number | undefined | 20 | 设置指针刮除笔刷的半径，单位为像素。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/scratch-card/ScratchCard.vue | |||
overlayColor | string | undefined | undefined | 设置 Canvas 覆盖层的纯色底色；未设置时使用主题双色斜纹。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/scratch-card/ScratchCard.vue | |||
fadeDuration | number | undefined | 300 | 达到完成阈值后覆盖层淡出的时长，单位为毫秒；减少动态效果偏好会跳过动画。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/scratch-card/ScratchCard.vue | |||
class | string | undefined | undefined | 追加到刮刮卡根容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/scratch-card/ScratchCard.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@progress | [percent: number] | 刮除进度变化时发出当前已揭示面积百分比；事件经过节流。 |
详情声明类型[percent: number] 来源packages/ui/src/components/scratch-card/ScratchCard.vue | ||
@completed | [] | 达到自动揭示阈值或调用 revealAll 后，覆盖层完成移除时发出。 |
详情声明类型[] 来源packages/ui/src/components/scratch-card/ScratchCard.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 被 Canvas 覆盖层遮住并逐步揭示的刮刮卡底层内容。 |
详情声明类型{}来源packages/ui/src/components/scratch-card/ScratchCard.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
isRevealed | boolean | 组件实例上暴露的揭示状态；Vue 会自动解包内部 Ref，可通过 scratchCardRef.value.isRevealed 读取布尔值。 |
详情声明类型boolean 字面量
来源packages/ui/src/components/scratch-card/ScratchCard.vue | ||
revealAll | () => void | 立即揭示全部内容并开始移除覆盖层。 |
详情声明类型() => void 来源packages/ui/src/components/scratch-card/ScratchCard.vue | ||
可访问性
- 键盘操作：组件设置了
tabindex="0"，按Enter或Space键可自动揭开全部内容 - ARIA 属性：组件设置了
role="region"，aria-label默认使用本地化文本scratchCard.ariaLabel（默认为"刮刮卡"） - 动效降级：当用户偏好
prefers-reduced-motion: reduce时，淡出动画被跳过，Canvas 立即移除 - 交互提示：Canvas 覆盖层使用
cursor-crosshair光标提示可交互