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.

Comments