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>