vue-country-code-select
Country Code Select with Vue.
Checkout Demo at Github pages.
Installation
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
Demo Usage
$ yarn/npm install
$ yarn/npm dev
$ yarn/npm build
Made by Mon.