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.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