v-mask masking phone numbers to brazilian format

Viewed 618

I'm implementing masks for phone fields to Brazilian format (99)9999-9999 or (99)99999-9999 using vue + v-mask. I researched but found nothing that would suit me 100% so I made my own implementation but it was a little ugly ... and I can't delete the blocks already typed ... if someone has a more elegant solution and can give a little help I appreciate it.

<v-text-field
    label="Celular*"
    v-model="clienteData.celular"
    :error-messages="errors.celular"
    v-mask="phone_mask"
></v-text-field>

passing data to v-mask

<script>
export function phoneMask(value) {
     const ddd = [
  /[0-9]/, /[0-9]/
];

if(value.length < 14){
    return  [ '(',... ddd, ')', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/, '-',/[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/ ] 
}
return  value.length > 2 ?[ '(',... ddd, ')', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/, '-',/[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/ ] : ['(', ...ddd, ')'] 

  }

export default {
        data: () => ({ 
            phone_mask : phoneMask
        }),
}
0 Answers
Related