vue-tel-input with Quasar
-
Hi,
I am planning to use vue-tel-input ( here ) in my quasar app (made using vue-cli). Do anyone has some experience with it?
More precisely, I would like to know if we may manage to get the quasar/material look using this component (if I wrap it inside a QField, would it be enough?). If you have some advices, I would be glad to hear it ;). -
Hello,
I’m interested by this topic too.
Regards.
-
Hi,
This is a start, probably far from perfect, but enough to use vue-tel-input with quasar without too much pain. It is fast and easy solution, which works ok.
<template> <q-field label="Your phone number" stack-label :error="isError"> <vue-tel-input :wrapper-classes="['no-border','no-box-shadow','no-ouline','wrapper-vue-tel-input-in-qfield']" input-classes="input-vue-tel-input-in-qfield" @input="handleInput" > </vue-tel-input> </q-field> </template> <style> /* note: the height 98% is to avoid the inner input to hide the bottom border of q-field */ .input-vue-tel-input-in-qfield { height:98%; margin-bottom: auto; } /* note: I use color dark for my text, I am forcing it because otherwise it is the same color as q-field - so here primary color or negative color when error - */ .wrapper-vue-tel-input-in-qfield li.vti__dropdown-item { color: var(--q-color-dark); } </style> <script> import { VueTelInput } from 'vue-tel-input'; export default { name: 'InputPhone', props: { // }, components: { VueTelInput, }, data() { return { isError: false, } }, methods: { handleInput (val, objVal) { console.log(val, objVal); this.isError = !objVal.isValid; } }, } </script>
-
https://www.npmjs.com/package/vue-tel-input here a repo that integrate beautifully vue-tel-input
Here an exemple to make it work with q-form:
<q-field v-model="bookingPhoneNumber" borderless :rules="[isRequired, isPhoneNumberValid]" > <vue3-q-tel-input v-model:tel="bookingPhoneNumber" class="pr-b-tel-input pronto-input" default-country="fr" :label="t('generic.phoneNumber')" rounded outlined @error="isPhoneNumberInError = $event" /> </q-field>
const isPhoneNumberInError = ref(false); async function isPhoneNumberValid(): Promise<boolean | string> { // sleep 100ms await new Promise((r) => setTimeout(r, 100)); return ( !isPhoneNumberInError.value || 'Rentrer un numéro de téléphone valide' ); }