README
vuetify-mask
Project
vuetify-mask is a component for working with some of the main types of masks in the v-text-field.
Links
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