Vue IMask Plugin

vue-imask

Install

npm install vue-imask

Mask Component Example

1<template>
2  <imask-input
3    v-model="numberModel"
4    :mask="Number"
5    radix="."
6    :unmask="true"
7    // depending on prop above first argument is
8    // `value` if `unmask=false`,
9    // `unmaskedValue` if `unmask=true`,
10    // `typedValue` if `unmask='typed'`
11    @accept="onAccept"
12    // ...and more mask props in a guide
13
14    // other input props
15    placeholder='Enter number here'
16  />
17</template>
18
19<script>
20  import {IMaskComponent} from 'vue-imask';
21
22  export default {
23    data () {
24      return {
25        numberModel: '',
26        onAccept (value) {
27          console.log(value);
28        }
29      }
30    },
31    components: {
32      'imask-input': IMaskComponent
33    }
34  }
35</script>

Mask Directive Example

1<template>
2  <input
3    :value="value"
4    v-imask="mask"
5    @accept="onAccept"
6    @complete="onComplete">
7</template>
8
9<script>
10  import {IMaskDirective} from 'vue-imask';
11
12  export default {
13    data () {
14      return {
15        value: '',
16        mask: {
17          mask: '{8}000000',
18          lazy: false
19        },
20        onAccept (e) {
21          const maskRef = e.detail;
22          console.log('accept', maskRef.value);
23        },
24        onComplete (e) {
25          const maskRef = e.detail;
26          console.log('complete', maskRef.unmaskedValue);
27        }
28      }
29    },
30    directives: {
31      imask: IMaskDirective
32    }
33  }
34</script>

More options see in a guide.

Many Thanks to

@Yegor Loginov

@Stanislav Eremenko

@Yacine Hmito

@unofficial

Support Development

Paypal