Neverending Puppy Marathon

    vue-imask

    6.4.2 • Public • Published

    Vue IMask Plugin

    vue-imask

    npm version License: MIT

    Install

    npm i vue-imask

    for Vue 2 also do:

    npm i -D @vue/composition-api

    If you are using NuxtJS with Vue 2 you also need to install:

    npm i -D @nuxtjs/composition-api

    And then add @nuxtjs/composition-api/module in the buildModules option in your nuxt.config.js.

    Mask Component Example (Vue 2)

    <template>
      <imask-input
        v-model="numberModel"
        :mask="Number"
        radix="."
        :unmask="true"
        <!-- depending on prop above first argument of 'accept' callback is
        `value` if `unmask=false`,
        `unmaskedValue` if `unmask=true`,
        `typedValue` if `unmask='typed'` -->
        @accept="onAccept"
    
        <!-- ...see 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 Component Example (Vue 3)

    <template>
      <imask-input
        <!-- possible to use 'v-model' = 'v-model:value' = 'v-model:masked' and 'v-model:unmasked' -->
        v-model:typed="numberModel"
        :mask="Number"
        radix="."
        @accept:masked="onAccept" <!-- accept value (same as '@accept:value' or just '@accept') -->
        @accept:unmasked="onAcceptUnmasked"
        <!--
          @accept:typed="onAccepttyped"
          @complete:typed="onCompleteTyped"
        -->
    
        <!-- ...see 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 });
            },
            onAcceptUnmasked (unmaskedValue) {
              console.log({ unmaskedValue });
            }
          }
        },
        components: {
          'imask-input': IMaskComponent
        }
      }
    </script>

    Mask Directive Example

    In some cases value bindings (v-model) might not work for directive, you can use @accept or @complete events to update the value.

    <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
            },
          },
        },
        methods: {
          onAccept (e) {
            const maskRef = e.detail;
            this.value = maskRef.value;
            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.

    Mask Composable (Vue 3)

    <template>
      <input ref="el">
    </template>
    
    <script>
      import { useIMask } from 'vue-imask';
    
      export default {
        setup (props) {
          const { el, masked } = useIMask({
            mask: Number,
            radix: '.',
          });
      
          return { el };
        }
      }
    </script>

    Support Development

    Paypal

    Install

    npm i vue-imask

    DownloadsWeekly Downloads

    10,083

    Version

    6.4.2

    License

    MIT

    Unpacked Size

    62.2 kB

    Total Files

    14

    Last publish

    Collaborators

    • unmanner