Installation
npm
npm i vue-phone-mask --save
Usage
import PhoneMaskInput from "vue-phone-mask";<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 | |
| 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 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 |
| Macedonia | mk |
| Madagascar | mg |
| Malawi | mw |
| Malaysia | my |
| Maldives | mv |
| Mali | ml |
| 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 |
| Mozambique | mz |
| Namibia | na |
| Nauru | nr |
| Nepal | np |
| 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 |
| Peru | pe |
| 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 |