Vue Masked Input
There are many excelent components to get a masked input when you are using vuejs. But, I could not find one that fill all my requisites.
I have use the following aproach:
I used the string-mask component to format the values;
Write the get
and set
for the value of the input; and
Write one method to verify if the value typed is an number.
GET:
get() {
const valuePrice = state.price;
const formatter = new StringMask(state.maskinput, {
reverse: true
});
let result = "";
if (valuePrice !== "" && valuePrice != null) {
result = formatter.apply(valuePrice.toString().replace(/[^0-9]/g, ""));
}
return result;
}
SET:
set(value) {
const formatter = new StringMask(state.mascara, {
reverse: true
});
const normalized = value.replace(/[^0-9]/g, "");
let result = "";
if (normalized !== "" && normalized !== null) {
result = formatter.apply(normalized);
}
if (result === "0" || result === "0,00") {
result = null;
}
state.price = result;
}
Verify if is number:
methods: {
isNumber: function (evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();;
} else {
return true;
}
}
},
To use:
@keypress="isNumber($event)"
:value="valor" @input="value => valor = value"
We can add a default value, in my case, I cannot allow a zero value.