Vue.js scratch cards component Example

Vue.Js

Nicesnippets

31

21-11-2020


Vue.js scratch cards component Example

Hi Guys,

Today, I will learn you how to create scratch cards component in vue.js . we will show example of vue.js scratch cards component. I will use vue-scratchable.umd.min.js to create scratch cards in vue.js.A Vue.js wrapper component that turns everything into fun scratch cards. Includes touch support without additional dependencies.

Step 1:Installation


Here in this step, I will install npm.

npm i vue-scratchable

Step 2: Usage

In this step,I will register the component globally.

import VueScratchable from 'vue-scratchable';

Vue.component('vue-scratchable', VueScratchable);

Step 3: ScratchVue.js

In this step,I will create Scratch card component.

<template>

<div id="app">

<h1>A beautiful parrot got trapped behind some paper.</h1>

<h2>Scratch them free!</h2>

<vue-scratchable

v-slot="{ init }"

:brushOptions="brush"

:hideOptions="hide"

getPercentageCleared

@percentageUpdate="updatePoints"

>

<div class="wrapper">

<img

:src="require('https://images.wallpaperscraft.com/image/city_buildings_aerial_view_193041_1280x960.jpg')"

@load="init()"

>

<h3>{{ subline }}</h3>

</div>

</vue-scratchable>

<p>You scratched {{ percentage }}% free.</p>

<pre>Photo by- nicesnippets.com</pre>

</div>

</template>

<script>

import VueScratchable from 'vue-scratchable';

import paperPattern from './assets/natural-paper-texture.jpg';

export default {

name: 'App',

components: {

VueScratchable,

},

computed: {

subline() {

return this.percentage < 100

? `There is still ${100 - this.percentage}% left for me to be free... - nicesnippets.com`

: 'Thank you for scratching me free! - nicesnippets.com';

},

},

data() {

return {

percentage: 0,

hide: {

type: 'pattern',

src: paperPattern,

repeat: 'repeat',

},

brush: {

size: 60,

shape: 'round',

},

};

},

methods: {

updatePoints(percentage) {

this.percentage = percentage;

},

},

};

</script>

<style>

body {

background-color: #333;

margin: 0;

}

#app {

font-family: 'Open Sans', sans-serif;

color: white;

display: flex;

flex-direction: column;

align-items: center;

max-width: 1200px;

margin: 0 auto;

margin-top: 50px;

}

.vue-scratchable-wrapper {

background-color: white;

}

h3 {

color: #2c3e50;

text-align: center;

}

a {

color: #2196f3;

}

</style>

It will help you...


Recommended Posts