vue-phone-mask-input
Version:
Vue International Phone Mask Input
322 lines (303 loc) • 7.68 kB
Markdown
# @kai24/vue-phone-mask-input
[](https://www.npmjs.com/package/vue-phone-mask-input)
[](https://www.npmjs.com/package/vue-phone-mask-input)
[](https://www.npmjs.com/package/vue-phone-mask-input)
## Installation
### yarn
```
yarn add vue-phone-mask-input
```
### npm
```
npm i vue-phone-mask-input --save
```
## Usage
```javascript
import PhoneMaskInput from "vue-phone-mask-input";
```
```html
<template>
<div>
<h2>Example 4 [custom style]</h2>
<phone-mask-input
v-model="phone"
autoDetectCountry
showFlag
@onValidate="onValidate"
wrapperClass="wrraper-example"
inputClass="input-example"
flagClass="flag-example"
/>
<p>
Phone number:
<b>{{phone}}</b>
</p>
<p class="json">{{valid}}</p>
</div>
</template>
```
## Props
| Name | Type | Default | Description |
| --- | --- | ---| --- |
| value | [String, Number] | | Value to be render in the input |
| placeholder | String | "" | Placeholder to be shown when no tags |
| autoDetectCountry | Boolean | false | Detect visitor country |
| defaultCountry | String | | one of the values defined [here](#available-flags) |
| showFlag | Boolean | false | Show country flag |
| flagSize | String | normal | Available values: small, normal, big |
| disabled | Boolean | false | Disable input field |
| wrapperClass | String | { display: flex; flex-direction: row; align-items: center; height: 40px; }| Style class of div wrapper input and flag|
| inputClass | String | { height: 20px; }| Style class of input|
| flagClass | String | { margin: 0; } | Style class of flag (span tag) |
## Events
| Property value | Arguments| Description |
| --- | --- | ---|
| input | String | Fires when the input changes with the argument is the string number |
| isValid | Object | Fires when the input changes with the argument is the object includes { number, isValid, country } |
| onBlur | | Fires on blur event |
| onFocus | | Fires on focus event |
## Available Flags
Here follows the list of the available flags. They are identified using the [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1) standard.
This component currently support **alpha-2** of the standard.
| **Country Name** | **alpha-2** |
|--------------|------|
| Afghanistan | af |
| Aland Islands | ax |
| Albania | al |
| Algeria | dz |
| American Samoa | as |
| Andorra | ad |
| Angola | ao |
| Anguilla | ai |
| Antigua and Barbuda | ag |
| Argentina | ar |
| Armenia | am |
| Aruba | aw
| Australia | au |
| Austria | at |
| Azerbaijan | az |
| Bahamas | bs |
| Bahrain | bh |
| Bangladesh | bd |
| Barbados | bb |
| Belarus | by |
| Belgium | be |
| Belize | bz |
| Benin | bj |
| Bermuda | bm |
| Bhutan | bt |
| Bolivia | bo |
| Bosnia and Herzegovina | ba |
| Botswana | bw |
| Brazil | br |
| British Virgin Islands | vg |
| Brunei | bn |
| Bulgaria | bg |
| Burkina Faso | bf |
| Burma | mm |
| Burundi | bi |
| Cambodia | kh |
| Cameroon | cm |
| Canada | ca |
| Canary Islands | ic |
| Cape Verde | cv |
| Cayman Islands | ky |
| Central African Republic | cf |
| Chad | td |
| Chile | cl |
| China | cn |
| Colombia | co |
| Comoros | km |
| Cook Islands | ck |
| Costa Rica | cr |
| Croatia | hr |
| Cuba | cu |
| Curacao | cw |
| Cyprus | cy |
| Czech Republic | cz |
| Democratic Republic of the Congo | cd |
| Denmark | dk |
| Djibouti | dj |
| Dominica | dm |
| Dominican Republic | do |
| East Timor | tl |
| Ecuador | ec |
| Egypt | eg |
| El Salvador | sv |
| Equatorial Guinea | gq |
| Eritrea | er |
| Estonia | ee |
| Ethiopia | et |
| European Union | eu |
| Falkland Islands (Malvinas) | fk |
| Faroe Islands | fo |
| Fiji | fj |
| Finland | fi |
| France | fr |
| French Polynesia | pf |
| French Southern Territories | tf |
| Gabon | ga |
| Gambia | gm |
| Georgia | ge |
| Germany | de |
| Ghana | gh |
| Gibraltar | gi |
| Granada | gd |
| Greece | gr |
| Greenland | gl |
| Guam | gu |
| Guatemala | gt |
| Guernsey | gg |
| Guinea | gn |
| Guinea-Bissau | gw |
| Guyana | gy |
| Haiti | ht |
| Honduras | hn |
| Hong Kong | hk |
| Hungary | hu |
| Iceland | is |
| India | in |
| Indonesia | id |
| Iran | ir |
| Iraq | iq |
| Ireland | ie |
| Isle of Man | im |
| Israel | il |
| Italy | it |
| Ivory Coast | ci |
| Jamaica | jm |
| Japan | jp |
| Jersey | je |
| Jordan | jo |
| Kazakhstan | kz |
| Kenya | ke |
| Kiribati | ki |
| Kuwait | kw |
| Kyrgyzstan | kg |
| Laos | la |
| Latvia | lv |
| Lebanon | lb |
| Lesotho | ls |
| Liberia | lr |
| Libya | ly |
| Liechtenstein | li |
| Lithuania | lt |
| Luxembourg | lu |
| Macao | mo | mac |
| Macedonia | mk |
| Madagascar | mg |
| Malawi | mw |
| Malaysia | my |
| Maldives | mv |
| Mali | ml | mli |
| Malta | mt |
| Marshall, Islands | mh |
| Martinique | mq |
| Mauricio | mu |
| Mauritania | mr |
| Mayotte | yt |
| Mexico | mx |
| Micronesia | fm |
| Moldova | md |
| Monaco | mc |
| Mongolia | mn |
| Montenegro | me |
| Montserrat | ms |
| Morocco | ma | mar |
| Mozambique | mz | moz |
| Namibia | na | nam |
| Nauru | nr | nru |
| Nepal | np | npl |
| Netherlands Antilles | an |
| New Caledonia | nc |
| New Zealand | nz |
| Nicaragua | ni |
| Niger | ne |
| Nigeria | ng |
| Niue | nu |
| Norfolk, Island | nf |
| North Korea | kp |
| Northern Mariana Islands | mp |
| Norway | no |
| Oman | om |
| Pakistan | pk |
| Palau | pw |
| Palestine | ps |
| Panama | pa |
| Papua New Guinea | pg |
| Paraguay | py | pry |
| Peru | pe | per |
| Philippines | ph |
| Pitcairn | pn |
| Poland | pl |
| Portugal | pt |
| Puerto Rico | pr |
| Qatar | qa |
| Republic of the Congo | cg |
| Romania | ro |
| Russia | ru |
| Rwanda | rw |
| Saint Barthelemy | bl |
| Saint Helena | sh |
| Saint Kitts and Nevis | kn |
| Saint Lucia | lc |
| Saint Martin | mf |
| Saint Vincent and the Grenadines | vc |
| Samoa | ws |
| San Marino | sm |
| Sao Tome and Principe | st |
| Saudi Arabia | sa |
| Senegal | sn |
| Serbia | rs |
| Seychelles | sc |
| Sierra Leone | sl |
| Singapore | sg |
| Slovakia | sk |
| Slovenia | si |
| Solomon Islands | sb |
| Somalia | so |
| South Africa | za |
| South Georgia and the South Sandwich Islands | gs |
| South Korea | kr |
| South Sudan | ss |
| Spain | es |
| Sri Lanka | lk |
| Sudan | sd |
| Suriname | sr |
| Swaziland | sz |
| Sweden | se |
| Switzerland | ch |
| Syria | sy |
| Taiwan | tw |
| Tajikistan | tj |
| Tanzania | tz |
| Thailand | th |
| The Netherlands | nl |
| Togo | tg |
| Tokelau | tk |
| Tonga | to |
| Trinidad and Tobago | tt |
| Tunisia | tn |
| Turkey | tr |
| Turkmenistan | tm |
| Turks and Caicos Islands | tc |
| Tuvalu | tv |
| Uganda | ug |
| Ukraine | ua |
| United Arab Emirates | ae |
| United Kingdom | gb |
| United States | us |
| Uruguay | uy |
| Uzbekistan | uz |
| Vanuatu | vu |
| Vatican City | va |
| Venezuela | ve |
| Vietnam | vn |
| Virgin Islands of the United States | vi |
| Wallis and Futuna | wf |
| Western Sahara | eh |
| Yemen | ye |
| Zambia | zm |
| Zimbabwe | zw |