In this article, we are going to understand the process of integration of jQuery Mask Plugin into the VueJS 3.0 application.
The toast plugin we are integrating needs to be integrated into the VueJS application of version 3.0.
src/components/HelloWorld.vue:
Features Of jQuery Mask Plugin:
- String/Numeric/Alpha/Mixed masking supports.
- Support event callbacks
- Reverse masking.
- Pattern matching
- Option pattern matching.
Create A Sample VueJS 3.0 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 jQuery Mask Npm Package:
Command To Install Mask Plugin:
npm install vue-jquery-mask
After successfully installing the 'vue-jquery-mask' plugin its reference will be added to the package.jsonImport 'vue-jquery-mask':
Let's import 'vue-jquery-mask' into our vue component.
src/components/HelloWorld.vue:(script Part)
<script> import vueMask from 'vue-jquery-mask'; export default { components: { vueMask } } </script>
vue-mask Component:
Let's begin by rendering 'vue-mask' Html component with a simple mask.
src/components/HelloWorld.vue:
<template> <div> <vue-mask class="form-control" v-model="date" mask="00/00/0000"> </vue-mask> <div>{{date}}</div> </div> </template>
- (Line: 3) Renders the 'vue-mask' Html component.
- (Line: 5) The 'v-model' directive used for the data binding.
- (Line: 6) The 'mask' property assigned with the masking pattern. Here we defined an example masking pattern for date display.
data(){ return { date: "", } }Here we can observe the masking only displayed on the text box but the data field 'date' contains value without masking.
raw Property:
The 'raw' property is a boolean type. If the 'raw' property set to true, then we will get the 'vue-mask' component value without masking and if the 'raw' property set to false then we can read the value including mask pattern.
src/components/HelloWorld.vue:
<vue-mask class="form-control" v-model="date" mask="00/00/0000" :raw="false"> </vue-mask>The ':raw=false' will return the 'vue-mask' component value including the mask pattern.
reverse Property:
Using the 'reverse' property masking can be done from right to left.
src/components/HelloWorld.vue:(Html Part)
<vue-mask class="form-control" v-model="date" mask="00-00000-0" :raw="false" :options = options> </vue-mask>
- (Line: 6) The 'vue-mask' component takes additional information using the 'options' property.
data () { return { date: "", options: { reverse:true, } } }
- The 'options' object configures with 'reverse' property by setting the value to 'true'.
translation Property:
The 'translation' property helps to apply the regex pattern to match. This will helps to apply different validation for each character of the mask.
src/components/HelloWorld.vue:(Html Part)
<vue-mask class="form-control" v-model="value" mask="AA/SSS/YYY" :raw="false" :options = options> </vue-mask>
- For the mask pattern here we defined "AA/SSS/YYY", using the transition property we will define a regex rule for each character in the mask property.
data(){ return { value: "", options: { translation:{ A: {pattern: /[A-Za-z0-9]/}, S: {pattern: /[A-Za-z]/}, Y: {pattern: /[0-9]/} } } } }
- The character 'A' in the mask allow alphabets of both caps and lower case and also numbers. The character 'S' in the mask allow alphabets of both caps and lower case. The character 'Y' in the mask allows only numeric values.
Callback Events:
The mask plugin also supports callback events like:
- onKeyPress
- onInvalid
- onComplete
- onChange
data () { return { value: "", options: { onKeyPress: this.maskOnKeyPress, onInvalid: this.maskOnInvalid, onComplete: this.maskOnComplete, onChange: this.maskOnchange } } }, methods:{ maskOnchange(){ alert('on change'); }, maskOnKeyPress(){ alert('on key press') }, maskOnInvalid(){ alert('on invalid') }, maskOnComplete(){ } }That's all about a few core features of jQuery Maks Plugin in the VueJS 3.0 application.
To know more and play with the plugin visit below links
https://github.com/ankurk91/vue-jquery-mask
http://igorescobar.github.io/jQuery-Mask-Plugin/docs.html
Support Me!
Buy Me A Coffee
PayPal Me
Wrapping Up:
Hopefully, I think this article delivered some useful information on the jQuery Mask Plugin integration into the VueJs3.0 application. I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment