Ionic Vue Input Mask

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

Docs and Demo

Install

yarn add npm i ionic-vue-input-mask
or
npm i -S npm i ionic-vue-input-mask

Usage (two flavors)

Global as plugin

import Mask from 'ionic-vue-input-mask'
Vue.use(Mask)

Global as directive

import {VMask} from 'ionic-vue-input-mask'
Vue.directive('mask', VMask)

Local (as directive)

import {VMask} from 'ionic-vue-input-mask'
export default {
  directives: {VMask}
}

Input

<input v-mask="'##/##/####'" />

Ion Input

<ion-input v-mask="'##/##/####'" />

Multiple masks

<input v-mask="['##/##/####', '##-##-####']" />

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}

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

You're free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. Your name will be added to the hall of fame ;)

Hall of Fame

Contributors

• VueTips
• Dominic Monteiro

Based on Vue-The-Mask

License

This project is licensed under MIT License