v-the-mask-2

Tiny and dependency free mask input for VueJS

Usage no npm install needed!

<script type="module">
  import vTheMask2 from 'https://cdn.skypack.dev/v-the-mask-2';
</script>

README

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