插件名称 | 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 | 类型 | 返回 | 默认 |
---|---|---|---|
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 :'
}"