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 or Playground.

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';

In your component:

<template>
...
   <vue-tel-input v-model="phone"></vue-tel-input>
...
<template>
<script>
import VueTelInput from 'vue-tel-input';

export default {
  components: {
    VueTelInput,
  },
  data() {
    return {
      phone: '',
    };
  },
}
</script>

Use as a custom field of vue-form-generator

Add a component using vue-form-generator's abstractField mixin

// 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

Test all props on CodeSandbox.

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
`disabled`	`Boolean`	`false`	Disable input field
`disabledFormatting`	`Boolean`	`false`	Disable formatting the phone number in the input, the formatted result still be accessible by `formattedNumber` returned from `onInput` event
`placeholder`	`String`	Enter a phone number	Placeholder for the input
`required`	`Boolean`	`false`	Required property for HTML5 required attribute
`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']`
`autocomplete`	`String`	`'on'`	Native input 'autocomplete' attribute
`name`	`String`	`'telephone'`	Native input 'name' attribute
`maxLen`	`Number`	`25`	Native input 'maxlength' attribute
`wrapperClasses`	`String` \| `Array` \| `Object`	`''`	Custom classes for the wrapper
`inputClasses`	`String` \| `Array` \| `Object`	`''`	Custom classes for the `input`
`inputId`	`String`	`''`	Custom 'id' for the `input`
`dropdownOptions`	`Object`	`{ disabledDialCode: false, tabindex: 0 }`	Options for dropdown, supporting `disabledDialCode` and `tabindex`
`inputOptions`	`Object`	`{ showDialCode: false, tabindex: 0 }`	Options for input, supporting `showDialCode` (always show dial code in the input) and `tabindex`
`validCharactersOnly`	`Boolean`	`false`	Only allow valid characters in a phone number (will also verify in `mounted`, so phone number with invalid characters will be shown as an empty string)

Events

Property value	Arguments	Description	Notes
`input`	`String`, `Object`	Fires when the input changes with the argument is the object includes `{ number, isValid, country }`	`onInput` deprecated
`validate`	`Object`	Fires when the correctness of the phone number changes (from `true` to `false` or vice-versa) and when the component is mounted `{ number, isValid, country }`	`onValidate` deprecated
`blur`		Fires on blur event	`onBlur` deprecated
`space`		Fires on keyup.space event	`onSpace` deprecated
`enter`		Fires on keyup.enter event	`onEnter` deprecated
`open`		Fires when the flags dropdown opens
`close`		Fires when the flags dropdown closes
`country-changed`	`Object`	Fires when country changed (even for the first time)	Available from `v2.4.2`

Highlights & Credits

Telephone Number parsing, validation by libphonenumber-js.
Country Codes data from intl-tel-input.
User's country by ip2c.org, request using Fetch API.

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

Typescript Support

If you working with typescript will need declaration requirements.

npm install --save-dev @types/vue-tel-input

Contributors

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

...more

made with ❤ by Steven.