Vue IMask Plugin
vue-imask
Install
npm install vue-imask
Mask Component Example
<template>
<imask-input
v-model="numberModel"
:mask="Number"
radix="."
:unmask="true"
// depending on prop above first argument is
// `value` if `unmask=false`,
// `unmaskedValue` if `unmask=true`,
// `typedValue` if `unmask='typed'`
@accept="onAccept"
// ...and more mask props in a guide
// other input props
placeholder='Enter number here'
/>
</template>
<script>
import {IMaskComponent} from 'vue-imask';
export default {
data () {
return {
numberModel: '',
onAccept (value) {
console.log(value);
}
}
},
components: {
'imask-input': IMaskComponent
}
}
</script>Mask Directive Example
<template>
<input
:value="value"
v-imask="mask"
@accept="onAccept"
@complete="onComplete">
</template>
<script>
import {IMaskDirective} from 'vue-imask';
export default {
data () {
return {
value: '',
mask: {
mask: '{8}000000',
lazy: false
},
onAccept (e) {
const maskRef = e.detail;
console.log('accept', maskRef.value);
},
onComplete (e) {
const maskRef = e.detail;
console.log('complete', maskRef.unmaskedValue);
}
}
},
directives: {
imask: IMaskDirective
}
}
</script>More options see in a guide.