Mask

Tiny and dependency free mask input for VueJS

Install

yarn add v-the-mask

# or

npm i -S v-the-mask

Usage (two flavors)

Global

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

Local (as directive)

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

Tokens

'*': {pattern: /./},
'#': {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()},
'N': {pattern: /[a-zA-Z0-9]/, transform: v => v.toLocaleUpperCase()},
'n': {pattern: /[a-zA-Z0-9]/, transform: v => v.toLocaleLowerCase()},
'!': {escape: true}

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 |

Contribution

TBD

License

This project is licensed under MIT License