The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.
Clone or download
Latest commit fb3de2e Mar 19, 2018
Permalink
Failed to load latest commit information.
.github issue template Aug 22, 2017
build Add Webpack an Babel Mar 2, 2017
config Add Webpack an Babel Mar 2, 2017
src ops Mar 19, 2018
static Add Webpack an Babel Mar 2, 2017
test/unit Addind support to negative money Jan 2, 2018
.DS_Store fix money for v-model Apr 10, 2017
.babelrc fix Mar 19, 2018
.gitignore Change event Mar 2, 2017
.postcssrc.js Add Webpack an Babel Mar 2, 2017
LICENSE Create LICENSE Jan 4, 2018
README.md Update README.md Apr 4, 2017
circle.yml fix Jul 10, 2017
event-listener.js fix Mar 19, 2018
index.html Add Webpack an Babel Mar 2, 2017
index.js fix Mar 19, 2018
is-character-keypress.js fix Mar 19, 2018
package-lock.json fix Mar 19, 2018
package.json fix Mar 19, 2018

README.md

The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks. Download Count Npm Version

You can use patterns like:

<input type="text" v-mask="'99/99'" />
// Turns 1224 in 12/24
<input type="text" v-mask="'(99) 9999-9999'" />
// Turns 1149949944 in (11) 4994-9944
<input type="text" v-mask="'AAA-9999'" />
// Turns ABC1234 in ABC-1234

You can also format money:

<input type="text" v-mask="'money'" />
// Turns 123499 in 1.234,99

This directive can also receive a object from your data like:

<template>
  <p>
    <input v-mask="mask" type="text">
  </p>
</template>

<script>
 export default {
   data() {
     return {
       mask: '999.999.999-99'
     }
   }
 }
</script>

Sample using import:

<script>
import Component from './components/Component'
import AwesomeMask from 'awesome-mask'

export default {
  name: 'app',
  components: {
    Component
  },
  directives: {
    'mask': AwesomeMask
  }
}
</script>

Examples