Vee Mask

vee-mask is a tiny and dependency free mask input for Vue.js that allows you to easily mask your input fields based on tokens.

NOTICE

I've created this package from a fork of vue-the-mask due to lack of maintenance; the need of some extra features; and code fixes well discussed in the original repository. But still, props to the original algorithms from @neves 🙌

Install

yarn add vee-mask
or
npm i -S vee-mask

Usage

Globally

import VeeMask from 'vee-mask'
Vue.use(VeeMask)

…or, Locally (as directive)

import { mask } from 'vee-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 | | tokens | false | Object | tokens | Custom tokens for mask |

License

This project is licensed under MIT License