ionic-vue-input-mask

Uma biblioteca para adicionar máscaras a campos de entrada Vue.
500
vue input mask ionic
Install
npm install ionic-vue-input-mask
Latest Version:1.0.7
Vue:3
License:MIT
Last Updated:Sep 20, 2023
Links: npm
Maintainer: dominicmonteiro

Ionic Vue Input Mask

npm npm npm

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 ;)

The Mask Wolf

Hall of Fame

Contributors

Based on Vue-The-Mask

License

This project is licensed under MIT License

Related Packages

@justfork/maska

Simple zero-dependency input mask for Vue.js and vanilla JS

4,780 2,021
input mask vue
vue-masked-input

Masked input component for Vue.js 2.X

449,387 451
input mask vue masked
vue-3-mask

A mask library for input fields in Vue.js 3

106,849
input mask vue vue3
vue-input-mask

Masked input component for Vue

24,465 14
input mask vue masked
vue-imask

Vue input mask

1,807,737 5,181
input mask vue imask javascript

Version History

Version Released Vue License
1.0.7 ^3.2.13 MIT
1.0.6 ^3.2.13 MIT
1.0.5 ^3.2.13 MIT
1.0.4 ^3.2.13
1.0.2 ^3.2.13