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>