Vue Input Mask Component – v-mask

Description:

v-mask is a simple input mask lib for vue.js based on text-mask-core.

Basic usage:

1. Install and import the v-mask.

import Vue from 'vue'
import VueMask from 'v-mask'
// as a plugin
Vue.use(VueMask);

// as a directive
import { VueMaskDirective } from 'v-mask'
Vue.directive('mask', VueMaskDirective);

// as a filter
import { VueMaskFilter } from 'v-mask'
Vue.filter('VMask', VueMaskFilter)

2. Apply a custom mask to input field.

<template>
  <input type="text" v-mask="'####-##'" v-model="myInputModel">
</template>

3. Default placeholders.

  • #: Number (0-9)
  • A: Letter in any case (a-z,A-Z)
  • N: Number or letter (a-z,A-Z,0-9)
  • X: Any symbol
  • ?: Optional (next character)

Preview:

v-mask

Changelog:

v2.3.0  (09/27/2020)

  • filter: make filter work with RegExps, functions and respect custom replacers similarly to directive

v2.2.4 (01/24/2020)

  • filter: prevent crashes for null values, cover filter by tests

v2.2.3 (07/22/2020)

  • mask: allow any input for falsy mask

v2.2.1 (06/17/2020)

  • Fixed regexp mask array is not working in v2.2.0

Download Details:

Author: probil

Live Demo: https://v-mask-demo.netlify.app/

Download Link: https://github.com/probil/v-mask/archive/master.zip

Official Website: https://github.com/probil/v-mask

Install & Download:

$ npm install v-mask

You Might Be Interested In:

Add Comment