vuejs 数组定义字段_一个漂亮的文本字段，用于格式化VueJS制作的电话号码

vuejs 数组定义字段

电话号码输入 (vue-phone-number-input)

A beautiful text field to format phone numbers made with VueJS.

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

View Demo 查看演示 Download Source 下载源

安装 (Installation)

使用纱 (Using yarn)

yarn add vue-phone-number-input

yarn add vue-phone-number-input

使用npm (Using npm)

npm i --save vue-phone-number-input

npm i --save vue-phone-number-input

用法 (Usage)

ES6模块/ CommonJS (ES6 Modules / 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 (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>

道具API (Props API)

Props	Type	Required	Default	Options
v-model	String/Int	true	-	-
id	String	false	VuePhoneNumberInput	-
color	String HEX	no	dogderblue
valid-color	String HEX	no	yellowgreen
disabled	Boolean	no	false
dark	Boolean	no	false
size	Boolean	no	false
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-use-browser-locale	Boolean	no	false
translations (3)	Object	no	null
no-flags	Boolean	no	false

道具	类型	需要	默认	选件
模型	字符串/整数	真正	--	--
ID	串	假	VuePhoneNumberInput	--
颜色	字符串HEX	没有	Dogderblue
有效颜色	字符串HEX	没有	黄绿色
残障人士	布尔型	没有	假
黑暗	布尔型	没有	假
尺寸	布尔型	没有	假
默认国家/地区代码(1)	串	没有	空值
首选国家(2)	数组<string>	没有	空值
被忽略的国家	数组<string>	没有	空值
唯一国家	数组<string>	没有	空值
无验证者状态	布尔值	没有	假
不用浏览器的语言环境	布尔型	没有	假
翻译(3)	目的	没有	空值
无标志	布尔型	没有	假

(1) Ex : default-country-code="FR"

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

(2) Ex : preferred-countries="['FR', 'BE', 'DE']" This countries will be at the top of the list

(2)例如： preferred-countries="['FR', 'BE', 'DE']"此国家/地区将在列表顶部

(3) translations comes to replace default texts - Ex :

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

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

贡献 (Contribution)

项目设置 (Project setup)

npm install

编译和热重装以进行开发 (Compiles and hot-reloads for development)

npm run serve

整理和修复文件 (Lints and fixes files)

npm run lint

翻译自: https://vuejsexamples.com/a-beautiful-text-field-to-format-phone-numbers-made-with-vuejs/

vuejs 数组定义字段