A fast telephone input plugin for Qasar Framework, with support for auto country detection and live filtering.
How to use it:
1. Import the component and styles.
import Vue3QTelInput from 'vue3-q-tel-input' import 'vue3-q-tel-input/dist/vue3-q-tel-input.esm.css'
2. Add the vue3-q-tel-input component to the template.
<vue3-q-tel-input v-model:tel="tel" />
3. Available component props.
tel: { type: [String, Number], default: () => '' },
required: { type: Boolean, default: () => false },
searchText: { type: String, default: () => 'Search' },
// Quasar Select options
dropdownOptions: { type: Object, default: () => ({}) },
defaultCountry: { type: String, default: () => 'us' },
eagerValidate: { type: Boolean, default: true },
4. Events.
- @update:tel – Triggers when an update is made to the model value
- @input – Triggers when the input value changes
- @error – true when the input is invalid and false when valid
Preview:
Changelog:
05/07/2023
- v1.1.6
Download Details:
Author: CdTgr
Live Demo: https://codepen.io/CdTgr/full/OJEMZvG
Download Link: https://github.com/CdTgr/vue3-q-tel-input/archive/refs/heads/master.zip
Official Website: https://github.com/CdTgr/vue3-q-tel-input
Install & Download:
# Yarn
$ yarn add vue3-q-tel-input
# NPM
$ npm i vue3-q-tel-input