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>