vuetify-masked

vuetify-masked

Create a masked text field for vuetify 2.x based on v-text-field. Supported are static masks provided by string/object and the masking of float and integer values. Additionally, a filter exists to format a value.

Demo

CodeSandbox Demo

Install

npm install vuetify-masked --save

Global

import Vue from 'vue'
import VuetifyMasked from 'vuetify-masked'

Vue.use(VuetifyMasked)

Local

// use only the component
import { VuetifyMaskedComponent } from 'vuetify-masked'

// use only the filter
import { VuetifyMaskedFilter } from 'vuetify-masked'

export default {
  components: {
    'v-text-field-masked': VuetifyMaskedComponent
  },
  filters: {
    VuetifyMaskedFilter
  }
}

Usage

Once installed, for a simple mask the component can be used in a template as simple as:

Type 'text'

<!-- Component -->
<v-text-field-masked
  v-model="text"
  formatMask="###A/##l/D#U"
  label="default type (text)"
  :showHints="true"
></v-text-field-masked>

<!-- Filter -->
{{ text | vuetifyMaskedFilter({ formatMask: "###A/##l/D#U" }) }}

Resulted value for '123A56U89a' is '123A/56u/89A'. In the text field default hints will be shown.

Type 'float'

<v-text-field-masked
  v-model="text"
  label="float type"
  type="float"
></v-text-field-masked>

<!-- Filter -->
{{ text | vuetifyMaskedFilter({ type:"float" }) }}

Resulted value for '1234567890' is '1,234,567,890.00'

Type 'integer'

<v-text-field-masked
  v-model="text"
  label="integer type"
  type="integer"
></v-text-field-masked>

<!-- Filter -->
{{ text | vuetifyMaskedFilter({ type:"integer" }) }}

Resulted value for '1234567890' is '1,234,567,890'

Type 'currency'

<v-text-field-masked
  v-model="text"
  label="currency type"
  type="currency"
></v-text-field-masked>

<!-- Filter -->
{{ text | vuetifyMaskedFilter({ type:"currency" }) }}

Resulted value for '1234567890' is '1,234,567,890.00USD'

Type 'percentage'

<v-text-field-masked
  v-model="text"
  label="percentage type"
  type="percentage"
></v-text-field-masked>

<!-- Filter -->
{{ text | vuetifyMaskedFilter({ type:"percentage" }) }}

Resulted value for '1234567890' is '1,234,567,890.00%'

Options (Component Props and Filter Parameters)

The following options can be used for component and filter

Predefined Mask Characters

Any other alphabetical character of the mask will be handled as #.

Object Attributes for Mask

In case of an object, the following attributes can be set.

Hints Object Attributes and Default Values