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