vue-multi-mask-component

Vue-phone-mask-component(RU/EN)

Vue.js multi phone mask component. Just start typing the number and the phone mask will apply automatically.

Russian and English support(see Properties section).

Install

npm i vue-multi-mask-component

Usage

// import the component
import PhoneMask from 'vue-multi-mask-component'
 
// register it in your app
new Vue({
  el: '#app',
  components: {PhoneMask}
})
 
// add component to the template with v-model="value" to sync the value with your data
<template>
  <PhoneMask v-model="value"></PhoneMask>
</template>
 

Properties and handlers

Property/handler	Required	Type	Default	Description
@change	false	Method	--	Set handler for changes
lang	false	String	RU	Set language RU/EN.
showRegion	false	Boolean	true	Show region name

Example:

// set component language to english
<PhoneMask lang="EN"></PhoneMask>

Styling

Component class name is 'vue-multi-mask-component'

// template structure
<div class="vue-multi-mask-component">
    <input></input>  // phone input
    <p></p>          // region data
</div>

Dependencies

Inputmask

Based on

Based on jQuery inputmask-multi plugin

License

This project is licensed under MIT License