Smooth Scratch Card For Vue.js – Scratchable

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,
},

Preview:

Changelog:

v0.3.3 (01/11/2020)

• Update packages.

v0.3.2 (11/07/2020)

• Fix the MutationObserver with the debounce script
• Replace slotDomElement with Vue’s $el.

Download Details:

Author: sebastianwachter

Live Demo: https://sebastianwachter.github.io/vue-scratchable/

Download Link: https://github.com/sebastianwachter/vue-scratchable/archive/master.zip

Official Website: https://github.com/sebastianwachter/vue-scratchable

Install & Download:

# Yarn
$ yarn add vue-scratchable

# NPM
$ npm i vue-scratchable --save