In this article, we will learn about scratch card integration in the vuejs application using a 'vue-scratchable' plugin.
Color: The color category to mask the scratch content with color. This category configuration contains two properties like 'type', 'value'. The 'type' value always set to 'color' if we preferred to use the color category. The 'value' will be the color name or color hash code.
Create A Vuejs Sample Application:
Command To Install Vue CLI Globally On Your System:
npm run -g @vue/cli
Command To Create Vue App:
vue create your_application_name
After creating a sample application run the following command to start the application.
Command To Run Vue App:
npm run serve
Install vue-scratchable Npm Package:
Command To Install Scratch Card Package:
npm i vue-scratchable
Register Scratch Component Globally:
Now let's register the 'vue-scratchable' library component globally by importing in main.js(entry file).
src/main.js:
import Vue from 'vue' import App from './App.vue' import VueScratchable from 'vue-scratchable'; Vue.component('vue-scratchable', VueScratchable); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
- (Line: 3) Imported 'vue-scratchable' library.
- (Line: 5) Registered 'VueScratchable' component with the 'Vue' instance globally.
Scratch Card To Display Text:
Let's begin by creating a simple scratch card which displays hidden text on scratching the card.
src/components/HelloWorld.vue:(Html Part)
<template> <div> <div class="card" style="width: 18rem;"> <div class="card-body"> <vue-scratchable> <h3>Hello Scratchable World</h3> <h4>Hurray! you own a car</h4> </vue-scratchable> </div> </div> </div> </template>
- (Line: 5) Rendered 'vue-scratchable' component.
- (Line: 6-7) Hidden text by the scratch card.
Scratch Card To Display Image:
In the previous sample replace the text with the image tag.
src/components/HelloWorld.vue:(Html Part)
<vue-scratchable> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT1l5fR_5J_LRooC8aw-PkMF8XJWK18bdikQQ&usqp=CAU" height="300px"> </vue-scratchable>
brushOptions Property:
The 'brushOptions' property changes the style and size of the scratch. This 'brushOptions' takes javascript object as an input parameter and this input object contains props like 'shape', 'size'. The 'shape' property to change the style of the scratch, it configuration value is like 'round', 'bevel', 'miter'. The default value of the 'shape' property is 'round'. The 'size' property to increase the width of the scratch, its default value is 20.
src/components/HelloWorld.vue:(Html Part)
<vue-scratchable :brushOptions="brush"> <img src="yourImageUrl" height="300px"> </vue-scratchable>src/components/HelloWorld.vue:(Script Part)
data(){ return{ brush:{ size: 30, shape: 'bevel' } } }
- The 'brush' options configured with values of 'size' and 'shape' property.
hideOptions Property:
The categories in the 'hideOptions' property are like:
- Color
- Pattern
src/components/HelloWorld.vue:(Html Part)
<vue-scratchable :brushOptions="brush" :hideOptions="hide"> <img src="your_image" height="300px"> </vue-scratchable>
- The 'hideOptions' property configured
data(){ return{ brush:{ size: 30, shape: 'round' }, hide:{ type:"color", value:"yellow" } } }
- Configured area need to be scratched will be displayed in yellow color.
src/components/HelloWorld.vue:(Script Part)
data(){ return{ brush:{ size: 30, shape: 'round' }, hide:{ type:"pattern", src:"https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/222/bcf90d24adf679755d47e6e2adf31afa/Canvas_createpattern.png", repeat:"repeat" } } }These are some of the key features of the vue-scratchable plugin. To explore more options for the plugin visit "https://github.com/sebastianwachter/vue-scratchable".
Support Me!
Buy Me A Coffee
PayPal Me
Wrapping Up:
Hopefully, I think this article delivered some useful information on the vue-scratchable to integrate into the VueJs application. I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment