Package Exports

vue-tel-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-tel-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-tel-input

International Telephone Input with Vue.

Checkout Demo at Github pages.

In-action GIF

Installation

yarn:
```
  yarn add vue-tel-input
```
npm:
```
  npm i --save vue-tel-input
```

Usage

Import default CSS to your project:

import 'vue-tel-input/dist/vue-tel-input.css';

Install as a global component:

import Vue from 'vue'
import VueTelInput from 'vue-tel-input'

Vue.use(VueTelInput)

In your component:

<template>
...
   <vue-tel-input v-model="phone"
                  @onInput="onInput"
                  <!-- optional -->
                  :preferredCountries="['us', 'gb', 'ua']">
   </vue-tel-input>
...
<template>
<script>
export default {
  data() {
    return {
      phone: '',
    };
  },
  methods: {
    /**
     * @param {string} number
     * the phone number inputted by user, will be formatted along with country code
     * // Ex: inputted: (AU) 0432 432 432
     * // number = '+61432421546'
     *
     * @param {Boolean} isValid
     * @param {string} country
     */
     onInput({ number, isValid, country }) {
       console.log(number, isValid, country);
     },
  },
}
</script>

Use as a custom field of vue-form-generator

Add a component with vue-form-generator's abstractField

// tel-input.vue
<template>
  <vue-tel-input v-model="value"></vue-tel-input>
</template>

<script>
import VueTelInput from 'vue-tel-input'
import { abstractField } from 'vue-form-generator';

export default {
  name: 'TelephoneInput',
  mixins: [abstractField],
  components: {
    VueTelInput,
  },
};
</script>

  import Vue from 'vue';
  import TelInput from '<path>/tel-input.vue';

  import 'vue-tel-input/dist/vue-tel-input.css';

  Vue.component('field-tel-input', TelInput);

Now it can be used as tel-input in schema of vue-form-generator

var schema: {
  fields: [{
      type: "tel-input",
      label: "Awesome (tel input)",
      model: "telephone"
  }]
};

Read more on vue-form-generator's instruction page

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
`preferredCountries`	`Array`	`[]`	Preferred countries list, will be on top of the dropdown. ie `['AU', 'BR']`
`disabled`	`Boolean`	`false`	Disable input field
`placeholder`	`string`	Enter a phone number	Placeholder for the input
`required`	`Boolean`	`false`	Required property for HTML5 required attribute
`enabledFlags`	`Boolean`	`true`	Enable flags in the input

Events

Property value	Arguments	Description
`onInput`	`Object`	Fires when the input changes with the argument is the object includes `{ number, isValid, country }`
`onBlur`		Fires on blur event

Highlights & Credits

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.
Boostrap-Vue.
User's Location by get-json and ipifo.io

Demo Usage

# install dependencies
$ yarn/npm install

# compile demo for development
$ yarn/npm dev

# open Browser and start serve in demo
$ yarn/npm demo:open

# compile dist demo
$ yarn/npm dist:demo

# compile dist
$ yarn/npm dist

Contributors

mikob for super awesome work to remove the bootstrap dependency.
kalcifield for helping make the input preload with a phone number.

made with ❤ by Steven.