Introdução
O v-mask é uma biblioteca que pode ser utilizada no VueJS para colocar formatação de dados em campos, como formatação de CPF, telefone, cartão de crédito, data e entre outros.
Colocar máscara nos campos é muito importante, pois isso melhora demais a usabilidade do software, ou seja, fica mais fácil do usuário entender, qual valor de entrada de um determinado campo.
Por exemplo, sem a máscara em um campo de CPF, um usuário pode colocar com os pontos, outro pode colocar sem os pontos, outro pode colocar os pontos e esquecer o traço e por ai vai.
São muitas variações e realizar esse tratamento no backend pode ser mais custoso, principalmente quando se tem a possibilidade de já receber os dados corretos para a inserção no banco de dados.
Sobre o v-mask
A biblioteca está atualmente na versão 2.2.3, que foi lançada a quatro meses e tem uma taxa em média de 30 mil downloads semanais.
Para utilizar em um projeto, precisa realizar a instalação da biblioteca via NPM ou Yarn com o comando:
npm install v-mask
ou
yarn add v-mask
E também realizar a importação no main.js do Vue:
import VueMask from 'v-mask';
Vue.use(VueMask);
Como colocar a máscara no input
Para colocar a máscara dentro de um campo, para que ele respeite um padrão de caracteres, é preciso passar uma prop que será o v-mask.
O valor passado nessa prop será a formatação desejada, e o que é usado para demarcar isso, são hashtags (#).
Por exemplo, um campo com máscara de data no padrão brasileiro, fica dessa forma:
<label>Campo de data</label>
<input v-mask="'##/##/####'" v-model="data"/>
E com isso, quando esse campo for preenchido, ele vai ficar da seguinte forma:
E dessa forma será aplicado para todos os tipos de campo que desejar colocar uma formatação básica.
Outro exemplo, pode ser de como usar máscara para um campo de CPF, o código ficaria assim:
<label>Campo CPF</label>
<input v-mask="'###.###.###-##'" v-model="data"/>
Como colocar máscara dinamicamente
Pense na seguinte situação, o sistema no qual trabalha, possibilita o cadastro de pessoa física e jurídica, nesse caso, é preciso ter a formatação para CPF ou CNPJ, isso no mesmo campo.
É possível aplicar a máscara utilizando o v-mask e para isso é necessário um radio button que indicará qual será a mascara aplicada, CPF ou CNPJ, e o v-mask respeitará o v-model do campo do radio button, que contém o valor correto da máscara. Veja na prática
HTML:
<div id="app">
<label>
<input type="radio" id="cpf-example" value="###.###.###-##" v-model="dynamicMask">
<span>Pessoa Física</span>
</label>
<br>
<label>
<input type="radio" id="cnpj-example" value="##.###.###/####-##" v-model="dynamicMask">
<span>Pessoa Jurídica</span>
</label>
<br>
<input
type="text"
v-mask="dynamicMask"
v-model="data"
/>
</div>
Javascript:
Vue.use(VueMask.VueMaskPlugin);
new Vue({
el: '#app',
data() {
return {
dynamicMask: '###.###.###-##',
data: ""
}
}
})
E o resultado será, que quando tiver selecionado a opção Pessoa Física e o usuário digitar informações nesse campo, ficará dessa maneira:
Já quando tiver selecionado a opção de Pessoa Jurídica, a formatação ficará assim:
Exemplo prático
Para o exemplo prático, será utilizado para um cadastro de usuário que pode ser pessoa física ou jurídica, com os dados de Nome, CPF ou CNPJ, data de nascimento, cartão de crédito e telefone. É preciso ter um projeto Vue básico rodando, para saber como fazer isso, veja este link.
Também no exemplo, será utilizado o BootstrapVue somente para estilizar os campos, caso queira ver como realizar a instalação do BootstrapVue em um projeto, veja este link.
Primeiro será necessário instalar as bibliotecas para o projeto com o comando:
npm install bootstrap bootstrap-vue v-mask
Depois disso precisa importar as bibliotecas para o projeto no arquivo main.js, este arquivo deve ficar assim:
//main.js
import Vue from "vue";
import App from "./App.vue";
import BootstrapVue from "bootstrap-vue";
import VueMask from "v-mask";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(VueMask);
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount("#app");
E no componente App.vue, será adicionado o formulário e o Javascript para o funcionamento da máscara, este arquivo deve ficar assim:
//App.vue
<template>
<div id="app">
<b-form class="p-2">
<b-form-group label="Nome">
<b-form-input v-model="form.nome" type="text"></b-form-input>
</b-form-group>
<b-form-group label="Data de nascimento">
<b-form-input
v-model="form.data_nascimento"
v-mask="'##/##/####'"
></b-form-input>
</b-form-group>
<b-form-group label="Cartão de crédito">
<b-form-input
v-model="form.cartao"
v-mask="'#### #### #### ####'"
></b-form-input>
</b-form-group>
<b-form-group label="Telefone">
<b-form-input
v-model="form.telefone"
v-mask="'+55 (##) #####-####'"
></b-form-input>
</b-form-group>
<b-form-group label="Tipo de pessoa">
<b-form-radio v-model="mascaraCpfOuCnpj" value="###.###.###-##" selected
>Pessoa Física</b-form-radio
>
<b-form-radio v-model="mascaraCpfOuCnpj" value="##.###.###/####-##"
>Pessoa Jurídica</b-form-radio
>
</b-form-group>
<b-form-group label="CPF/CNPJ">
<b-form-input
v-model="form.cpf_ou_cnpj"
v-mask="mascaraCpfOuCnpj"
></b-form-input>
</b-form-group>
<b-button type="reset" variant="warning" class="mr-2">Limpar</b-button>
<b-button type="submit" variant="primary">Salvar</b-button>
</b-form>
</div>
</template>
//continuação App.vue
<script>
export default {
name: "App",
data() {
return {
mascaraCpfOuCnpj: "",
form: {
nome: "",
data_nascimento: "",
cartao: "",
telefone: "",
cpf_ou_cnpj: "",
},
};
},
};
</script>
E o resultado desse código será esse:
Caso você queira ver esse exemplo prático funcionando, o código está disponível no meu CodeSandbox, https://codesandbox.io/s/v-mask-666y1?file=/src/App.vue:0-1702
Com isso, se tem uma validação completa dos campos de um formulário de cadastro de usuário.
Vídeo completo
Caso queira, gravei um vídeo completo sobre como colocar máscara nos inputs com VueJS:
Conclusão
Utilizar máscara nos campos é muito importante, pois isso previne que o usuário coloque dados indesejados no formulário, e a máscara fornece um feedback muito rápido e intuitivo, facilitando demais a usabilidade do sistema, e isso é algo necessário atualmente. Essa biblioteca fornece diversas outras formas de criar formatação padrão em campos, vale a pena dar uma olhada na documentação completa para ver mais possibilidades. Até o próximo post 😀
Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.
Referências
https://github.com/probil/v-mask#readme
https://v-mask-demo.netlify.app/
https://www.npmjs.com/package/v-mask