0

Queria usar uma mascara em alguns inputs componentizados, mas a mesma não funciona, segue os respectivos trechos de código: no main.js temos:

import VueMask from 'v-mask'
Vue.use(VueMask);

no meu componente, tenho:

<input class="form-control input floating-input"
 @input="$emit('input',$event.target.value)"
 :value="value"
 v-bind="$attrs" 
 :type="tipo"
 v-mask = mask
 :placeholder="placeholder" /> 

e nas props:

mask: {
    required: false,
    type: String
  }

e finalmente quando tento usar esse componente com a tal mascara:

<my-input tipo="text" placeholder=" " label="Telefone" 
  mask="(##) ####-####"
  v-model="empresa.phone"
  v-validate="'required'"
  data-vv-name='tel'>
</my-input>

Estranhamente não acontece nada, sem erros no console, a mascara apenas não é aplicada.

2 Respostas 2

2

Você está tentando usar a diretiva do v-mask mas está importando o plugin e não a diretiva.

Aqui está um exemplo funcionando:

main.js

import { VueMaskDirective } from "v-mask";
Vue.directive("mask", VueMaskDirective);

component.vue

<template>
  <input v-mask="mask" v-model="phone">
</template>

<script>
export default {
  data() {
    return {
      mask: "(##) ####-####",
      phone: "4140028922"
    };
  }
};
</script>

https://codesandbox.io/s/olrkol8qk6

1
  • Funcionou. Obrigado.
    – João
    Commented 11/04/2019 às 13:34
0

Experimente assim caso o campo seja para Telefone ou Celular:

<template>
  <input v-mask="maskTel()" v-model="phone">
</template>

<script>
export default {
  data() {
    return {
      phone: "" // 4140028922 ou 41940028922
    };
  }, 
  methods: {
    maskTel() {
     if(!!phone) {
       return this.phone.length == 15 ? '(##) #####-####' : '(##) ####-#####'
     } else {
       return '(##) #####-####'
     }
  }
};
</script>
```

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .