vue-tel-input-vuetify
vue-tel-input-vuetify copied to clipboard
Add "persistent-placeholder" Prop
Is your feature request related to a problem? Please describe...
I can't use the persistent-placeholder
prop, which is normally available for Vuetify inputs.
After forking this repo and attempting to fix it myself I found that Vuetify needs to be updated to ^2.5
. I'd be happy to assist but would need direction since I don't have the scope to know what the ramifications of the update could be.
For anyone else having this issue, I used the following CSS. This works for me since we use persistent-placeholder
on all our inputs.
Globally, in a .scss
file:
.v-text-field .v-label {
transform: translateY(-18px) scale(0.81) !important;
}
Alternatively, you can do it scoped by wrapping the vue-tel-input-vuetify
in Vue component:
<template>
<vue-tel-input-vuetify class="c-tel-input"
v-bind="$attrs"
v-on="$listeners"
v-model="phone">
<template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
</vue-tel-input-vuetify>
</template>
<script>
export default {
name: "LTelInput"
}
</script>
<style lang="scss" scoped>
.c-tel-input {
&::v-deep {
.v-label {
transform: translateY(-18px) scale(0.81) !important;
}
}
}
</style>
Usage:
<l-tel-input v-model="phone"></l-tel-input>