Necessarily Precedes Mischief

    vuetify-mask

    1.1.2 • Public • Published

    vuetify-mask

    Project

    vuetify-mask is a component for working with some of the main types of masks in the v-text-field.

    Links

    See Demo here.
    GitHub.
    npm.

    Dependencies

    • vuejs
    • vuetify ($ npm install vuetify --save)
    • moment ($ npm install moment --save)
    • material design icon ($ npm install @mdi/font -D --save)

    Install

    $ npm install vuetify-mask --save
    

    Register

    1- Create a file src/plugins/vuetify-mask.js with:
    import Vue from "vue";
    import VuetifyMask from "vuetify-mask";
    Vue.use(VuetifyMask);
    export default VuetifyMask;

    2- Add in src/mains.js file:
    import "./plugins/vuetify-mask.js";

    Properties (v-bind:properties)

    You can add any v-text-field property
    v-text-field properties.

    Properties that have hyphens (single-line, background-color...) should be changed as follows:

    v-bind:properties="{
      singleLine: true,
      backgroundColor: 'red'
    }"

    or

    v-bind:properties="{
      'single-line': true,
      'background-color': 'red'
    }"

    Options (v-bind:options)

    Option Component Default Description
    inputMask Money, Percent, Integer, DateTime, SimpleMask mask that will be applied in the v-text-field
    outputMask Money, Percent, Integer, SimpleMask, CPF, CNPJ, CEP mask that will be applied in the v-model
    empty Money, Percent, Integer, DateTime, SimpleMask, CPF, CNPJ, CEP, DotNumber "" Value in v-model when v-text-field is empty. Can be null, "" or other
    applyAfter Integer, SimpleMask, CPF, CNPJ, CEP, DotNumber The value is masked only after all typing
    alphanumeric SimpleMask false
    lowerCase SimpleMask false
    acceptFile FileBase64 image/* Sets the file type to convert to base64

    Events

    Event value Description
    blur Event Emitted when the input is blurred
    change any Emitted when the input is changed by user interaction
    click MouseEvent Emitted when input is clicked
    focus Event Emitted when component is focused
    keydown KeyboardEvent Emitted when any key is pressed
    mousedown MouseEvent Emitted when click is pressed
    mouseup MouseEvent Event mouseup

    How to use

    - Money (v-text-field-money)

    <template>
      <div>
        <v-text-field-money
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            prefix: 'R$',
            readonly: false,
            disabled: false,
            outlined: false,
            clearable: true,
            placeholder: ' ',
          }"
          v-bind:options="{
            locale: 'pt-BR',
            length: 11,
            precision: 6,
            empty: null,
          }"
        />
      </div>
    </template>
    <script>
    export default {
      data: () => ({
        value: "123456789.00",    // 123456789.00 or "123456789.00" or "" or null
        label: "Money",
        disabled: false,
      }),
    };
    </script>
    

    - Percent (v-text-field-percent)

    <template>
      <div>
        <v-text-field-percent
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            suffix: '%',
            readonly: false,
            disabled: false,
            outlined: false,
            clearable: true,
            placeholder: '',
          }"
          v-bind:options="{
            locale: 'pt-BR',
            length: 3,
            precision: 2,
            empty: null,
          }"
        />
      </div>
    </template>
    <script>
    export default {
      data: () => ({
        value: "12.34",        // 12.34 or "12.34" or "" or null
        label: "Percent",
        focus: false,
      }),
    };
    </script>
    
    

    - Integer (v-text-field-integer)

    <template>
      <div>
        <v-text-field-integer
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            readonly: false,
            disabled: false,
            outlined: false,
            clearable: true,
            placeholder: '',
          }"
          v-bind:options="{
            inputMask: '#########',
            outputMask: '#########',
            empty: null,
            applyAfter: false,
          }"
          v-bind:focus="focus"
          v-on:focus="focus = false"
        />
      </div>
    </template>
    <script>
    export default {
      data: () => ({
        value: "123456789", // 123456789 or "123456789" or "" or null
        label: "Integer",
        focus: false,
      }),
    };
    </script>
    

    - DateTime (v-text-field-datetime)

      works in milliseconds

    <template>
      <div>
        <v-text-field-datetime
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            readonly: false,
            disabled: false,
            outlined: false,
            clearable: true,
            placeholder: 'YYYY-MM-DD HH:mm:ss',
            'prepend-icon': 'mdi-calendar',
          }"
          v-bind:options="{
            inputMask: 'YYYY-MM-DD HH:mm:ss',
            empty: null,
          }"
          v-bind:focus="focus"
          v-on:focus="focus = false"
        />
      </div>
    </template>
    <script>
    export default {
      data: () => ({
        value: "1595386800000",    // Milliseconds
        label: "DateTime",
        focus: false,
      }),
    };
    </script>
    

    - DateTimePicker (v-text-field-datetimepicker)

      works in milliseconds

    <template>
      <div>
        <v-text-field-datetimepicker
          v-model="value"
          label="Date Time"
          v-bind:properties="{
            backgroundColor: '#EEE9E9',
            clearable: false,
            outlined: true,
            prependIcon: 'mdi-calendar',
            appendIcon: 'mdi-av-timer',
          }"
          v-bind:options="{
            tabDateTitle: 'Date',
            tabTimeTitle: 'Time',
            tabBackgroundColor: 'green',
            locale: 'en-US',
            format: 'YYYY-MM-DD',
            closeOnDateClick: false,
            useSeconds: false,
          }"
        />
      </div>
    </template>
    <script>
    export default {
      data: () => ({
        value: 1558220700000,
      }),
    };
    </script>
    

    - Credit Card (v-text-field-simplemask)

    <template>
      <div>
        <v-text-field-simplemask
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            prefix: '',
            suffix: '',
            readonly: false,
            disabled: false,
            outlined: false,
            clearable: true,
            placeholder: '',
          }"
          v-bind:options="{
            inputMask: '#### #### #### ####',
            outputMask: '################',
            empty: null,
            applyAfter: false,
            alphanumeric: true,
            lowerCase: false,
          }"
          v-bind:focus="focus"
          v-on:focus="focus = false"
        />
      </div>
    </template>
    <script>
    export default {
      data: () => ({
        value: "1234432112344321",
        label: "Credit Card",
        focus: false,
      }),
    };
    </script>
    

    - Phone Number (v-text-field-simplemask)

    <template>
      <div>
        <v-text-field-simplemask
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            prefix: '',
            suffix: '',
            readonly: false,
            disabled: false,
            outlined: false,
            clearable: true,
            placeholder: '',
          }"
          v-bind:options="{
            inputMask: '(##) #####-####',
            outputMask: '###########',
            empty: null,
            applyAfter: false,
            alphanumeric: true,
            lowerCase: false,
          }"
          v-bind:focus="focus"
          v-on:focus="focus = false"
        />
      </div>
    </template>
    
    <script>
    export default {
      data: () => ({
        value: "99999999999",
        label: "Phone Number",
        focus: false,
      }),
    };
    </script>
    

    - Simple Mask (v-text-field-simplemask)

      You can create your masks.

    <template>
      <div>
        <v-text-field-simplemask
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            prefix: '',
            suffix: '',
            readonly: false,
            disabled: false,
            outlined: false,
            clearable: true,
            placeholder: '',
          }"
          v-bind:options="{
            inputMask: '##-####-####-###',
            outputMask: '##-####-####-###',
            empty: null,
            applyAfter: false,
            alphanumeric: true,
            lowerCase: false,
          }"
          v-bind:focus="focus"
          v-on:focus="focus = false"
        />
      </div>
    </template>
    <script>
    export default {
      data: () => ({
        value: "23-A568-B953-356", // "23-A568-B953-356" or "" or null
        label: "Simple Mask",
        focus: false,
      }),
    };
    </script>
    

    - Files (v-text-field-filebase64)

     Convert files to base 64.

    <template>
      <div>
        <v-text-field-filebase64
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            outlined: true,
            placeholder: ' ',
            appendIcon:'mdi-message-image-outline',
          }"
          v-bind:options="{
            acceptFile:'image/*',
          }"
          v-on:fileName="fileName = $event"
        />
      </div>
    </template>
    
    <script>
    export default {
      data: () => ({
        value:"",
        fileName: "",
        label: "Select Image",
      }),
    };
    </script>
    
    Other acceptFile options:
    acceptFile:'image/*'
    acceptFile:'application/pdf'
    acceptFile:'image/jpeg,image/gif,image/png,application/pdf'
    acceptFile:'image/jpeg,image/gif,image/png,application/pdf,image/x-eps'
    

    - DotNumber (v-text-field-dotnumber)

     Accept only dot and numbers.

    <template>
      <div>
        <v-text-field-dotnumber
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            readonly: false,
            disabled: false,
            outlined: false,
            clearable: true,
            placeholder: '',
          }"
          v-bind:options="{
            length: 20,
            empty: null,
            applyAfter: false,
          }"
        />
      </div>
    </template>
    <script>
    export default {
      data: () => ({
        value: "1.23.456.789", // "" or null
        label: "Only Dot and Number",
      }),
    };
    </script>
    

    - CPF (v-text-field-cpf)

     brazilian mask

    <template>
      <div>
        <v-text-field-cpf
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            readonly: false,
            disabled: false,
            outlined: true,
            clearable: true,
            placeholder: '',
          }"
          v-bind:options="{
            outputMask: '###########',
            empty: null,
            applyAfter: true,
          }"
          v-bind:focus="focus"
          v-on:focus="focus = false"
        />
      </div>
    </template>
    <script>
    export default {
      data: () => ({
        value: "97702036028", // 97702036028 or "97702036028" or "" or null
        label: "CPF (Brazilian mask)",
        focus: false,
      }),
    };
    </script>
    

    - CNPJ (v-text-field-cnpj)

     brazilian mask

    <template>
      <div>
        <v-text-field-cnpj
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            disabled: false,
            outlined: true,
            clearable: true,
            placeholder: '',
          }"
          v-bind:options="{
            outputMask: '##############',
            empty: null,
            applyAfter: true,
          }"
          v-bind:focus="focus"
          v-on:focus="focus = false"
        />
      </div>
    </template>
    <script>
    export default {
      data: () => ({
        value: "50703512000192", // 50703512000192 or "50703512000192" or "" or null
        label: "CNPJ (Brazilian mask)",
        focus: false,
      }),
    };
    </script>
    

    - CEP (v-text-field-cep)

     brazilian mask

    <template>
      <div>
        <v-text-field-cep
          v-model="value"
          v-bind:label="label"
          v-bind:properties="{
            disabled: false,
            outlined: true,
            clearable: true,
            placeholder: '',
          }"
          v-bind:options="{
            outputMask: '########',
            empty: null,
            applyAfter: true,
          }"
          v-bind:focus="focus"
          v-on:focus="focus = false"
        />
      </div>
    </template>
    
    <script>
    export default {
      data: () => ({
        value: "82515260", // 82515260 or "82515260" or "" or null
        label: "CEP (Brazilian mask)",
        focus: false,
      }),
    };
    </script>
    

    Install

    npm i vuetify-mask

    DownloadsWeekly Downloads

    704

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    57.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • juareznasato