The Mask

A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js

20180326105935

Install

yarn add vue-the-mask
or
npm i -S vue-the-mask

Usage (two flavors)

Global

import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)
JavaScript

Local (inside the component)

import {TheMask} from 'vue-the-mask'
export default {
  components: {TheMask}
}
JavaScript

Local (as directive)

import {mask} from 'vue-the-mask'
export default {
  directives: {mask}
}
JavaScript

Tokens

'#': {pattern: /\d/},
'X': {pattern: /[0-9a-zA-Z]/},
'S': {pattern: /[a-zA-Z]/},
'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
'a': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()},
'!': {escape: true}
JavaScript

The Mask Money

Properties

Property Required Type Default Description
value false String Input value or v-model
mask true String, Array Mask pattern
masked false Boolean false emit value with mask chars, default is raw
placeholder false String Same as html input
type false String 'text' Input type (email, tel, number, ...)
tokens false Object tokens Custom tokens for mask

GitHub

Tiny (<2k gzipped) and dependency free mask input for Vue.jsRead More

Latest commit to the master branch on 12-15-2022
Download as zip