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

Events

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>