The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.
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-1234You can also format money:
<input type="text" v-mask="'money'" />
// Turns 123499 in 1.234,99This 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>