Skip to content
Vue Telephone Input || My First Open-source contribution.
JavaScript Vue
Branch: master
Clone or download
Pull request Compare This branch is 1 commit ahead, 143 commits behind EducationLink:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
docs
src
.envrc
.eslintignore
.eslintrc.js
.gitignore
LICENSE
README.md
build.config.js
package-lock.json
package.json
yarn.lock

README.md

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>
  • Register the new field as a global component

      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
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
inputClasses String '' Custom classes for the input
dropdownOptions Object { disabledDialCode: false } Options for dropdown, supporting disabledDialCode

Events

Property value Arguments Description
onInput Object Fires when the input changes with the argument is the object includes { number, isValid, country }
onValidate 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 }
onBlur Fires on blur event

Highlights & Credits

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

made with ❤ by Steven.

You can’t perform that action at this time.