Scratch To Reveal
The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.
通过 CLI 安装
手动安装
复制并粘贴以下代码：
ScratchToReveal.vue
API
| Prop 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
class | string | "" | The class name to apply to the component. |
width | number | "" | Width of the scratch container. |
height | number | "" | Height of the scratch container. |
minScratchPercentage | number | 50 | Minimum percentage of scratched area to be considered as completed (Value between 0 and 100). |
gradientColors | [string,string,string] | - | Gradient colors for the scratch effect. |
| Event Name | Payload | 描述 |
|---|---|---|
complete | - | Callback function called when scratch is completed |
| Slot Name | 默认值 Content | 描述 |
|---|---|---|
default | - | The text below the scratch-off ticket. |
Component Code
You can 复制并粘贴以下代码： to create this component:
ScratchToReveal.vue
感谢
- Credits to Whbbit1999 for this component.
- Inspired by MagicUI Scratch To Reveal.