vue-country-code-select
Country Code Select with Vue.
Checkout Demo at Github pages.
Installation
-
yarn:
yarn add vue-country-code-select
-
npm:
npm i --save vue-country-code-select
Usage
-
Install as a global component:
import Vue from "vue"; import VueCountryCode from "vue-country-code-select"; Vue.use(VueCountryCode);
-
In your component:
<template> ... <vue-country-code @onSelect="onSelect" <!-- optional --> :preferredCountries="['vn', 'us', 'gb']"> </vue-country-code> ... <template> <script> export default { data() { return { }; }, methods: { onSelect({name, iso2, dialCode}) { console.log(name, iso2, dialCode); }, }, } </script>
-
Register the new field as a global component
Props
Property value | Type | Default value | Description |
---|---|---|---|
defaultCountry |
string |
'' |
Default country, will override the country fetched from IP address of user |
searchPlaceholderText |
string |
'' |
Default text - "Search country" |
enableSearchField |
Boolean |
'' |
Default "false" |
disabledFetchingCountry |
Boolean |
false | Disable fetching current country based on IP address of user |
enabledCountryCode |
Boolean |
false |
Enable country code in the input |
enabledFlags |
Boolean |
true |
Enable flags in the input |
preferredCountries |
Array |
[] |
Preferred countries list, will be on top of the dropdown. ie ['AU', 'BR']
|
onlyCountries |
Array |
[] |
List of countries will be shown on the dropdown. ie ['AU', 'BR']
|
ignoredCountries |
Array |
[] |
List of countries will NOT be shown on the dropdown. ie ['AU', 'BR']
|
dropdownOptions |
Object |
{ disabledDialCode: false } |
Options for dropdown, supporting disabledDialCode
|
Events
Property value | Arguments | Description |
---|---|---|
onSelect |
Object |
Fires when the input changes with the argument is the object includes { name, iso2, dialCode }
|
Highlights & Credits
- Forked from hantrongbinh/vue-country-code.
- Vue app created by vue-cli.
- Telephone Number parsing, validation by libphonenumber-js.
- Country Codes data from intl-tel-input.
- Country Flags by behdad/region-flags.
- User's Location by get-json and ipifo.io
Demo Usage
# install dependencies
$ yarn/npm install
# compile demo and start serve for development
$ yarn/npm dev
# build
$ yarn/npm build
Made by Mon.