vue-the-mask
Version:
Tiny (2KB) and dependency free mask input for Vue.js
109 lines (77 loc) • 5.84 kB
Markdown
# The Mask
A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js
## [Docs and Demo](https://vuejs-tips.github.io/vue-the-mask)
### [JsFiddle](https://jsfiddle.net/neves/r8cL3msn/1/)
## Install
```
yarn add vue-the-mask
or
npm i -S vue-the-mask
```
## Usage (two flavors)
### Global
```javascript
import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)
```
### Local (inside the component)
```javascript
import {TheMask} from 'vue-the-mask'
export default {
components: {TheMask}
}
```
### Local (as directive)
```javascript
import {mask} from 'vue-the-mask'
export default {
directives: {mask}
}
```
## Tokens
```javascript
'#': {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](#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
## Other Solutions
1.  https://github.com/nosir/cleave.js
1.  https://github.com/text-mask/text-mask
1.  https://github.com/igorescobar/jQuery-Mask-Plugin
1.  https://github.com/fernandofleury/vanilla-masker
1.  https://github.com/angular-ui/ui-mask
1.  https://github.com/insin/inputmask-core
1.  https://github.com/niksmr/vue-masked-input
1.  https://github.com/probil/v-mask
1.  https://github.com/moip/awesome-mask
1.  https://github.com/the-darc/string-mask
1.  https://github.com/romulobrasil/PureMask.js
1.  https://github.com/devindex/vue-mask
## Currency
1.  https://github.com/vuejs-tips/v-money
1.  https://github.com/plentz/jquery-maskmoney
1.  https://github.com/flaviosilveira/Jquery-Price-Format
1.  https://github.com/kevinongko/vue-numeric
### [Suggest another one here](https://github.com/vuejs-tips/vue-the-mask/issues/new?title=Library+Suggestion)
## Contribution
You're free to contribute to this project by submitting [issues](https://github.com/vuejs-tips/v-tag-input.svg/issues) and/or [pull requests](https://github.com/vuejs-tips/v-tag-input.svg/pulls). 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 ;)
## License
This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)