op-vue-scratchcard v1.5.3

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:

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 😂