Vue-country-code-multi NPM

vue-country-code

Country Code Select with Vue.

Checkout Demo at Github pages.

Installation

yarn:
```
  yarn add vue-country-code
```
npm:
```
  npm i --save vue-country-code
```

Usage

Install as a global component:

import Vue from "vue";
import VueCountryCode from "vue-country-code";

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>

Manual Trigger:

<template>
...
 <vue-country-code
                ref="vcc"
                @onSelect="onSelect"
 </vue-country-code>
 <button @click="manualTrigger">Manual Trigger</button>
...
<template>
<script>
export default {
data() {
  return {
  };
},
methods: {
   onSelect({name, iso2, dialCode}) {
     console.log(name, iso2, dialCode);
   },
   manualTrigger() {
     this.$refs.vcc.manualDropdown();
   }
},
}
</script>

Props

Property value	Type	Default value	Description
`defaultCountry`	`string`	`''`	Default country, will override the country fetched from IP address of user
`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 EducationLink/vue-tel-input.
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.

vue telephone phone country vue-country-code phone code country code

vue-multiselect

@everything-registry/sub-chunk-3077

1.1.4

2 years ago

1.1.3

2 years ago