Vue Phone Mask

Buy me a coffee ☕

Installation

yarn

yarn add bi-vue-phone-mask

npm

npm i bi-vue-phone-mask --save

Usage

import PhoneMaskInput from  "bi-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

Buy me a coffee ☕