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
}),
}