vuetify-mask
v1.1.2
Published
Mask components to vuetify 2
Downloads
2,846
Maintainers
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$',
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>