Zum Inhalt springen
← Zurück zu den Projekten

Vue The Mask

#The Mask

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

#Docs and Demo

#JsFiddle

The Mask Heart

#Install

yarn add vue-the-mask
or
npm i -S vue-the-mask

#Usage (two flavors)

#Global

import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)

#Local (inside the component)

import {TheMask} from 'vue-the-mask'
export default {
  components: {TheMask}
}

#Local (as directive)

import {mask} from 'vue-the-mask'
export default {
  directives: {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}

The Mask Money

#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

#What about money?

We understand that money format is a totally different domain, which needs another specific component. You can use https://github.com/vuejs-tips/v-money

The Mask Money

#Other Solutions

  1. https://github.com/nosir/cleave.js https://github.com/nosir/cleave.js
  2. https://github.com/text-mask/text-mask https://github.com/text-mask/text-mask
  3. https://github.com/igorescobar/jQuery-Mask-Plugin https://github.com/igorescobar/jQuery-Mask-Plugin
  4. https://github.com/fernandofleury/vanilla-masker https://github.com/fernandofleury/vanilla-masker
  5. https://github.com/angular-ui/ui-mask https://github.com/angular-ui/ui-mask
  6. https://github.com/insin/inputmask-core https://github.com/insin/inputmask-core
  7. https://github.com/niksmr/vue-masked-input https://github.com/niksmr/vue-masked-input
  8. https://github.com/probil/v-mask https://github.com/probil/v-mask
  9. https://github.com/moip/awesome-mask https://github.com/moip/awesome-mask
  10. https://github.com/the-darc/string-mask https://github.com/the-darc/string-mask
  11. https://github.com/romulobrasil/PureMask.js https://github.com/romulobrasil/PureMask.js
  12. https://github.com/devindex/vue-mask https://github.com/devindex/vue-mask

#Currency

  1. https://github.com/vuejs-tips/v-money https://github.com/vuejs-tips/v-money
  2. https://github.com/plentz/jquery-maskmoney https://github.com/plentz/jquery-maskmoney
  3. https://github.com/flaviosilveira/Jquery-Price-Format https://github.com/flaviosilveira/Jquery-Price-Format
  4. https://github.com/kevinongko/vue-numeric https://github.com/kevinongko/vue-numeric

#Suggest another one here

#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

#License

This project is licensed under MIT License

Neue Version verfügbar.