Vue Scratch Card
With majority of the code shamelessly stolen from a codepen by Andre Ruffert and React ScratchCard
Installation
$ npm install vue-scratchcard
Example Usage
This is a highly secretive message!!! Force Reveal! Force Reset
Parameters:
Parameter | Type | Description |
---|---|---|
imageUrl | String | cover image url |
brushUrl | String | brush image url |
cardWidth | Number | card width |
cardHeight | Number | card height |
finishPercent | Number | revelation percentage until removing cover |
forceReveal | Boolean | remove cover when changed from false -> true |
@complete (new in 1.2.0) | Event | event emitted on cover revelation |
onComplete (deprecated) | Function | callback on cover revelation |
As a Vue practice, to force reset a scratchcard, provide a key
attribute and change its value.
Just as explained in this post.
Change Log:
[1.2.0] - 2019-05-04
@complete
event for cover revelation (by NahroTo)- Deprecate
onComplete
handler
[before 1.2.0]
- Untracked 😂