Neverending Pile of Messages

    v-mask-directive-filter
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.13 • Public • Published

    V-MASK-DIRECTIVE-FILTER

    Support to Vue 3 available here

    A incredibly LIGHTER input mask directive and filter compatible with Vue 2 and Vuetify 2

    npm version Min Min Gziped

    Travis Build Known Vulnerabilities

    Browsers support

    IE / Edge
    IE / Edge
    Firefox
    Firefox
    Chrome
    Chrome
    Chrome
    Chrome Android
    Safari
    Safari
    iOS Safari
    iOS Safari
    Opera
    Opera
    IE9>, Edge 6> 1> 18> 3.1> 2> 12>

    Instalation

    $ yarn add v-mask-directive-filter
     
    or
     
    $ npm install --save v-mask-directive-filter

    Directive

    // Import the directive inside your main.(js|ts)
     
    import { VMaskDirective } from 'v-mask-directive-filter'
     
    Vue.directive('mask', VMaskDirective)

    or

    // using a custom directive
     
    import { getCustomMaskDirective } from 'v-slim-mask'
     
    const VMASKCustomDirective = getCustomMaskDirective({
      '#': /[0-9]/,
      Z: /[a-z]|[A-Z]/,
    })
    Vue.directive('mask', VMASKCustomDirective)

    Filter

    // Import the filter inside your main.(js|ts)
     
    import { VFilterDirective } from 'v-mask-directive-filter'
     
    Vue.filter('mask', VFilterDirective)

    Config

    Tokens

    Token Pattern Description
    N [0-9] numbers only
    S [a-z] | [A-Z] string a-z only
    A [0-9] | [a-z] | [A-Z] alphanumeric only
    C [^ ] required char
    X .* optional char

    Modifiers

    Modifier Default Description
    unmask false unmask the return value to the model
    parseint false parse to int the return value to the model
    init-change false set a initial value to the model on start
    hide-on-empty false hide the mask if no value

    Usage

    Using native input element

    // Inside your .vue component
     
    <template>
      <input v-model="cpf" v-mask="'NNN.NNN.NNN-NN'" />
    </template>
     
    // Entry => 99999999999 | cpf => "999.999.999-99"

    Using v-text-field of Vuetify

    // Inside your .vue component
     
    <template>
      <v-text-field v-mask.unmask="'(NN) NNNNN - NNNN'" v-model="phoneNumber" />
    </template>
     
    // Entry => 83999998888 | phoneNumber => "83999998888"
     
    <template>
      <v-text-field v-mask="'(NN) NNNNN - NNNN'" v-model="phoneNumber" />
    </template>
     
    // Entry => 83999998888 | phoneNumber => "(83) 99999 - 8888"

    Using vue 2.x filter

    // Inside your .vue component
    <span> {{ '83999998888' | mask('(NN) NNNNN - NNNN') }} </span>
     
    // This will result => (83) 99999 - 8888

    Using helper functions

     
    <script>
      import { maskTransform, unmaskTransform } from 'v-mask-directive-filter'
      export default Vue.extends({
        computed: {
          phoneFormatted(val) {
            return maskTransform(val, '(NN) NNNNN - NNNN')
          }
        }
      })
    </script>
     

    Demo

    vue 2.x + vuetify 2.x sample https://codesandbox.io/s/flamboyant-kilby-xv8hz

    Install

    npm i v-mask-directive-filter

    DownloadsWeekly Downloads

    38

    Version

    1.0.13

    License

    MIT

    Unpacked Size

    20.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • claudivanfilho