vue-tel-input-fix
v2.1.4
International Telephone Input with Vue
0/weekUpdated 3 years agoMITUnpacked: 628.5 KB
Published by Artem Ionov
npm install vue-tel-input-fixvue-tel-input
International Telephone Input with Vue.
Checkout Demo at Github pages.
Installation
- yarn:
``
bash
yarn add vue-tel-input-fix
`
- npm:
bash
npm i --save vue-tel-input-fix
`Usage
- Import default to your project:
`js
import 'vue-tel-input-fix/dist/vue-tel-input.css';
`- Install as a global component:
javascript
import Vue from 'vue'
import VueTelInput from 'vue-tel-input-fix' Vue.use(VueTelInput)
`- In your component:
js
...
:preferredCountries="['us', 'gb', 'ua']">
...
`$3
- Add a component with 's abstractField
`js
// tel-input.vue
`- Register the new field as a global component
js
import Vue from 'vue';
import TelInput from '/tel-input.vue'; import 'vue-tel-input-fix/dist/vue-tel-input.css';
Vue.component('field-tel-input', TelInput);
`- Now it can be used as
in schema of vue-form-generator
js
var schema: {
fields: [{
type: "tel-input",
label: "Awesome (tel input)",
model: "telephone"
}]
};
`
Read more on 's instruction page$3
| Property value | Type | Default value | Description |
| -------------- | ---- | ------------- | ----------- |
|
defaultCountry | string | '' | Default country, will override the country fetched from IP address of user |
| disabledFlagsDropdown | Boolean | false | Disable dropdown with country flags |
| disabled | Boolean | false | Disable input field |
| placeholder | string | Enter a phone number | Placeholder for the input |
| required | Boolean | false | Required property for HTML5 required attribute |
| 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'] |$3
| Property value | Arguments | Description |
| -------------- | --------- | ----------- |
|
onInput | Object | Fires when the input changes with the argument is the object includes { number, isValid, country and id element } |
| 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
- Vue app created by vue-cli.
- Telephone Number parsing, validation by libphonenumber-js.
- Country Codes data from intl-tel-input.
- Country Flags by behdad/region-flags.
- Boostrap-Vue.
- User's Location by get-json and ipifo.ioDemo Usage
`bashinstall dependencies
$ yarn/npm installcompile demo for development
$ yarn/npm devopen Browser and start serve in demo
$ yarn/npm demo:opencompile dist demo
$ yarn/npm dist:democompile dist
$ yarn/npm dist``Contributors
- mikob for super awesome work to remove the bootstrap dependency.
- kalcifield for helping make the input preload with a phone number.
made with ❤ by Steven.