The Mask input for Vue.js
A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js
loading...
What about currency?
We understand that money format is a totally different domain, which needs another specific component. You can use this one: v-money.
Install
yarn add vue-the-mask
or
npm i -S vue-the-mask
Usage
// Global
import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)
// Local Component
import {TheMask} from 'vue-the-mask'
export default {
components: {TheMask}
}
// Local Directive
import {mask} from 'vue-the-mask'
export default {
directives: {mask}
}
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 |
Other Solutions
https://github.com/nosir/cleave.js
https://github.com/text-mask/text-mask
https://github.com/igorescobar/jQuery-Mask-Plugin
https://github.com/fernandofleury/vanilla-masker
https://github.com/angular-ui/ui-mask
https://github.com/insin/inputmask-core
https://github.com/niksmr/vue-masked-input
https://github.com/probil/v-mask
https://github.com/moip/awesome-mask
https://github.com/the-darc/string-mask
https://github.com/romulobrasil/PureMask.js
https://github.com/devindex/vue-mask