@kai24/vue-phone-mask-input
Installation
yarn
yarn add vue-phone-mask-input
npm
npm i vue-phone-mask-input --save
Usage
import PhoneMaskInput from "vue-phone-mask-input";
<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 |