一个漂亮的文本字段，用于格式化VueJS制作的电话号码。

安装和下载：

# Yarn
$ yarn add vue-phone-number-input

# NPM
$ npm install vue-phone-number-input --save

使用：

ES6模块/ CommonJS

import VuePhoneNumberInput from 'vue-phone-number-input';
import 'vue-phone-number-input/dist/vue-phone-number-input.css';

Vue.component('vue-phone-number-input', VuePhoneNumberInput);

<VuePhoneNumberInput v-model="yourValue" />

UMD

<VuePhoneNumberInput v-model="yourValue" />

<script src="https://unpkg.com/vue" charset="utf-8"></script>
<script src="./dist/vue-phone-number-input.umd.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="./dist/vue-phone-number-input.css">

<script type="text/javascript">
  Vue.component('vue-phone-number-input', window.VuePhoneNumberInput.default);
</script>

Props API

Props	类型	返回	默认
v-model	String/Int	true	–
id	String	false	VuePhoneNumberInput
color	String HEX	no	dogderblue
valid-color	String HEX	no	yellowgreen
error-color	String HEX	no	orangered
size	String `sm	lg`	no
default-country-code (1)	String	no	null
preferred-countries (2)	Array<string>	no	null
ignored-countries	Array<string>	no	null
only-countries	Array<string>	no	null
no-validator-state	Boolean	no	false
no-flags	Boolean	no	false
disabled	Boolean	no	false
dark	Boolean	no	false
dark-color	String (hex)	no	#424242
required	Boolean	no	false
error	Boolean	no	false
clearable	Boolean	no	false
loader (3)	Boolean	no	false
translations (4)	Object	no	null
countries-height (5)	Number	no	30
no-use-browser-locale (6)	Boolean	no	false
fetch-country (7)	Boolean	no	false
no-country-selector (8)	Boolean	no	false
border-radius	Number	no	4
show-code-on-list	Boolean	no	false
no-example	Boolean	no	false

(1) 例如: default-country-code="FR"

(2) 例如: preferred-countries="['FR', 'BE', 'DE']" 此国家/地区将排在首位

(3) 加载程序进度条具有输入颜色（color props)

(4) 翻译将替换默认文本-例如：

translations="{
  countrySelectorLabel: 'Code pays',
  countrySelectorError: 'Choisir un pays',
  phoneNumberLabel: 'Numéro de téléphone',
  example: 'Exemple :'
}"

---

官网：https://github.com/LouisMazel/vue-phone-number-input

演示：https://www.vue365.cn/code_demo.php?id=761

GitHub下载：https://github.com/LouisMazel/vue-phone-number-input/archive/master.zip