Package Exports

vue-intl-telephone-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-intl-telephone-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-intl-telephone-input

Vue component for input international telephone numbers and validating.

Demo

Installation

yarn:
```
  yarn add vue-intl-telephone-input
```
npm:
```
  npm i --save vue-intl-telephone-input
```

Usage

Install as a global component:

import IntlTelInput from 'vue-intl-telephone-input';

Vue.component('intl-tel-input', IntlTelInput);

In your page component:

<template>
...
   <intl-tel-input :countryCode="'tw'" @validateSuccess="onSuccess"></intl-tel-input>
...
<template>
<script>
export default {
  data() {
    return {
      phone: '',
    };
  },
  methods: {
    /**
     * @param {string} number
     * @param {string} countryCode
     */
     onSuccess({ number, countryCode }) {
       console.log(number, countryCode);
     }
  },
}
</script>

Import in single component:

<template>
  <intl-tel-input :countryCode="'tw'"></intl-tel-input>
</template>

<script>
import IntlTelInput from 'vue-intl-telephone-input';

export default {
  name: 'Home',
  components: {
    IntlTelInput,
  }
};
</script>

Props

Property value	Type	Default value	Description
`countryCode`	`String`	`'tw'`	Default country. ex: 'tw', 'jp', 'kr'
`dialCode`	`String`	`''`	Enter a country dial code. ex: '886', '81', '82'
`value`	`String`	`''`	Enter a phone number
`options`	`Object`	`{}`	Custom Options
`options.className`	`String`	`''`	Set custom css class name
`options.input`	`Object`		Set input attribute
`options.input.required`	`Boolean`	`false`	Required property for HTML5 required attribute
`options.input.readonly`	`Boolean`	`false`	Set readonly attribute
`options.input.placeholder`	`String`	`''`	Set placeholder attribute

參數	型態	預設值	描述
`countryCode`	`String`	`'tw'`	預設國家代碼 ex: 'tw', 'jp', 'kr'
`dialCode`	`String`	`''`	國際碼 ex: '886', '81', '82'
`value`	`String`	`''`	電話號碼
`options`	`Object`	`{}`	客制選項
`options.className`	`String`	`''`	設置客制 css class 名稱
`options.input`	`Object`		設定 input 的屬性
`options.input.required`	`Boolean`	`false`	是否為必填
`options.input.readonly`	`Boolean`	`false`	是否為不能更改
`options.input.placeholder`	`String`	`''`	設定預設顯示字串

Events

Property value	Arguments	Description
`validateSuccess`	`Object`	Fires when the input changes on validate success with the argument is the object includes `{ number, countryCode }`
`validateError`		Fires when the input changes on validate error

事件名稱	參數型別	描述
`validateSuccess`	`Object`	電話格式正確時觸發，會回傳 `{ number, countryCode }`
`validateError`		電話格式錯誤時觸發，不會回傳任何參數

Override Style

you can set options.className :

<template>
...
  <intl-tel-input :options="otipns"></intl-tel-input>
...
<template>
<script>
  export default {
    data() {
      return {
        otipns: {
          className: 'my-style'
        }
      };
    }
  }
</script>
<style>
  .intl-tel-input.my-style .conutry-list .category-box .category-box-header {
    background-color: #3f51b5;
  }
</style>