Vue.js格式化中电话号码

Vue.js格式化中电话号码
插件名称 vue-phone-number-input
发布时间 2020年5月30日
插件作者 LouisMazel

一个漂亮的文本字段,用于格式化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 :'
}"