Smooth Scratch Card For Vue.js - Scratchable

Install & Download:

# Yarn
$ yarn add vue-scratchable
# NPM
$ npm i vue-scratchable --save

Description:

scratchable is a Vue.js component that turns everything into touch-enabled scratch cards.

How to use it:

1. Import the Scratchable component.

import VueScratchable from 'vue-scratchable';

2. Register the component.

// globally
Vue.component('vue-scratchable', VueScratchable);
// locally
export default {
  components: {
    VueScratchable,
  }
};

3. Add the <vue-scratchable/> component to the app template.

<vue-scratchable>
  ...
</vue-scratchable>

4. Possible options to config the scratch card.

brushOptions: {
  type: Object,
  default: () => ({
    size: 20,
    shape: 'round',
  }),
},
hideOptions: {
  type: Object,
  default: () => ({
    type: 'color',
    value: '#dadada',
  }),
},
getPercentageCleared: {
  type: Boolean,
  default: false,
},
percentageStride: {
  type: Number,
  default: 150,
},