op-vue-scratchcard
v1.5.4
Published
A Vue.js component that displays a scratchcard
Downloads
12
Readme
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
<template>
<div id="app">
<scratch-card :key="renderCount"
:cardWidth="cardWidth"
:cardHeight="cardHeight"
:finishPercent="finishPercent"
imageUrl="https://avatars2.githubusercontent.com/u/1077546?s=460&v=4"
:brushUrl="brushUrl"
:forceReveal="forceReveal">
<h2 class="card-content">This is a highly secretive message!!!</h2>
</scratch-card>
<button @click="forceReveal = true">Force Reveal!</button>
<button @click="renderCount++">Force Reset</button>
</div>
</template>
<script>
import ScratchCard from '../src/ScratchCard.vue';
import BRUSH from './brush.png';
export default {
name: 'app',
components: {
ScratchCard,
},
data() {
return {
renderCount: 0,
cardWidth: 300,
cardHeight: 300,
finishPercent: 70,
brushUrl: BRUSH,
forceReveal: false,
};
},
};
</script>
<style scoped>
.card-content {
color: red;
}
</style>
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 😂