Description:
A user-friendly international telephone input with country flags and codes.
How to use it:
1. Import Vue.js, Vuetify, and the VueTelInputVuetify into the project.
import Vue from 'vue'; import Vuetify from 'vuetify'; import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify); export default new Vuetify({ });
// main.js import Vue from 'vue'; import VueTelInputVuetify from 'vue-tel-input-vuetify'; import vuetify from "./plugins/vuetify";
2. Add the international telephone input component to the template.
<template> <vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify> <template>
export default { data() { return { phone: null } } };
3. Possible props to config the component.
messages: { type: [Array, String] }, errorMessages: { type: [Array, String] }, successMessages: { type: [Array, String] }, hint: { type: String }, suffix: { type: String }, prefix: { type: String }, backgroundColor: { type: String }, rules: { type: Array, default: () => [] }, loaderHeight: { type: [Number, String], default: 2 }, loading: { type: [Boolean, String], default: false }, hideDetails: { type: [Boolean, String] }, clearable: { type: Boolean, default: false }, filled: { type: Boolean, default: false }, fullWidth: { type: Boolean, default: false }, flat: { type: Boolean, default: false }, light: { type: Boolean, default: false }, validateOnBlur: { type: Boolean, default: false }, outlined: { type: Boolean, default: false }, persistentHint: { type: Boolean, default: false }, readonly: { type: Boolean, default: false }, error: { type: Boolean, default: false }, success: { type: Boolean, default: false }, shaped: { type: Boolean, default: false }, singleLine: { type: Boolean, default: false }, rounded: { type: Boolean, default: false }, value: { type: String, default: "" }, label: { type: String, default: "Enter a Phone Number" }, placeholder: { type: String, default: () => getDefault("placeholder") }, disabledFetchingCountry: { type: Boolean, default: () => getDefault("disabledFetchingCountry") }, disabled: { type: Boolean, default: () => getDefault("disabled") }, mode: { type: String, default: () => getDefault("mode") }, invalidMsg: { type: String, default: () => getDefault("invalidMsg") }, required: { type: Boolean, default: () => getDefault("required") }, allCountries: { type: Array, default: () => getDefault("allCountries") }, defaultCountry: { // Default country code, ie: 'AU' // Will override the current country of user type: String, default: () => getDefault("defaultCountry") }, preferredCountries: { type: Array, default: () => getDefault("preferredCountries") }, onlyCountries: { type: Array, default: () => getDefault("onlyCountries") }, ignoredCountries: { type: Array, default: () => getDefault("ignoredCountries") }, autocomplete: { type: String, default: () => getDefault("autocomplete") }, autofocus: { type: Boolean, default: () => getDefault("autofocus") }, name: { type: String, default: () => getDefault("name") }, wrapperClasses: { type: [String, Array, Object], default: () => getDefault("wrapperClasses") }, inputId: { type: String, default: () => getDefault("inputId") }, inputOptions: { type: Object, default: () => getDefault("inputOptions") }, maxLen: { type: Number, default: () => getDefault("maxLen") }, validCharactersOnly: { type: Boolean, default: () => getDefault("validCharactersOnly") }
Preview:
Changelog:
v1.2.16 (02/03/2021)
- core: update item-value on v-select
v1.2.15 (10/24/2020)
- lib: return input event on v-model value change
v1.2.14 (10/24/2020)
- lib: add style props to the CountryCode v-select
v1.2.13 (08/27/2020)
- Fixed lib: error when applying function “reset” of v-form
v1.2.12 (07/28/2020)
- component: fix issue switching countries
v1.2.11 (07/25/2020)
- component: add dense and outlined props
v1.2.10 (07/22/2020)
- fix(component): fix missing margin between flag and country
v1.2.9 (07/21/2020)
- Fixed component: prop for country selector ‘label’ attribute
v1.2.8 (07/18/2020)
- lib: add focus event and other important events
v1.2.7 (07/13/2020)
- lib: replace js scoped css to class scoped css
- lib: fix default label
- core: add polyfill for fetch
- lib: export plugin instead of component
v1.2.3 (07/12/2020)
- core: add label in plugin options
v1.2.0 (07/12/2020)
- textfield: use v-text-field slots from the outside component
v1.1.10 (07/11/2020)
- core: support vuetify loader
v1.1.9 (07/09/2020)
- Bug Fixes
Download Details:
Author: yogakurniawan
Live Demo: https://yogakurniawan.github.io/vue-tel-input-vuetify/
Download Link: https://github.com/yogakurniawan/vue-tel-input-vuetify/archive/master.zip
Official Website: https://github.com/yogakurniawan/vue-tel-input-vuetify
Install & Download:
# NPM
$ npm install vue-tel-input-vuetify --save