Vuetify国际电话输入组件 - vue-tel-input-vuetify

Vuetify国际电话输入组件 - vue-tel-input-vuetify
插件名称 vue-tel-input-vuetify
版本号 v1.2.16
发布时间 2020年5月23日
插件作者 Yogakurniawan

用户友好的国际电话输入,带有国旗和代码。

变更日志:

v1.2.16(02/03/2021)

  • core:在v-select上更新项目值

v1.2.15(10/24/2020)

  • lib:在v模型值更改时返回输入事件

v1.2.14(10/24/2020)

  • lib:将样式道具添加到CountryCode v-select

v1.2.13(2020年8月27日)

  • 修复了lib:应用v形式的函数“重置”时出错

v1.2.12(07/28/2020)

  • 组件:解决问题切换国家

v1.2.11(07/25/2020)

  • 组成部分:添加密集且轮廓鲜明的props

v1.2.10(07/22/2020)

  • 修复(组件):修复船旗国与国家之间缺少的空白

v1.2.9(07/21/2020)

  • 固定组件:国家/地区选择器“标签”属性的支持

v1.2.8(07/18/2020)

  • lib:添加焦点事件和其他重要事件

v1.2.7(07/13/2020)

  • lib:将js范围的CSS替换为类范围的CSS
  • lib:修复默认标签
  • 核心:添加polyfill以进行提取
  • lib:导出插件而不是组件

v1.2.3(2020/12/7)

  • 核心:在插件选项中添加标签

v1.2.0(07/12/2020)

  • textfield:使用外部组件的v-text-field插槽

v1.1.10(07/11/2020)

  • 核心:支持vuetify loader

v1.1.9(07/09/2020)

  • Bug修复

安装和下载:

# NPM
$ npm install vue-tel-input-vuetify --save

使用:

1.将Vue.js,Vuetify和VueTelInputVuetify导入项目。

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify);
export default new Vuetify({
});
// main.js
import Vue from 'vue';
import VueTelInputVuetify from 'vue-tel-input-vuetify';
import vuetify from "./plugins/vuetify";

2.将国际电话输入组件添加到模板中。

<template>
  <vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
<template>
export default {
  data() {
    return {
      phone: null
    }
  }
};

3.可能的props 来配置组件。

messages: {
  type: [Array, String]
},
errorMessages: {
  type: [Array, String]
},
successMessages: {
  type: [Array, String]
},
hint: {
  type: String
},
suffix: {
  type: String
},
prefix: {
  type: String
},
backgroundColor: {
  type: String
},
rules: {
  type: Array,
  default: () => []
},
loaderHeight: {
  type: [Number, String],
  default: 2
},
loading: {
  type: [Boolean, String],
  default: false
},
hideDetails: {
  type: [Boolean, String]
},
clearable: {
  type: Boolean,
  default: false
},
filled: {
  type: Boolean,
  default: false
},
fullWidth: {
  type: Boolean,
  default: false
},
flat: {
  type: Boolean,
  default: false
},
light: {
  type: Boolean,
  default: false
},
validateOnBlur: {
  type: Boolean,
  default: false
},
outlined: {
  type: Boolean,
  default: false
},
persistentHint: {
  type: Boolean,
  default: false
},
readonly: {
  type: Boolean,
  default: false
},
error: {
  type: Boolean,
  default: false
},
success: {
  type: Boolean,
  default: false
},
shaped: {
  type: Boolean,
  default: false
},
singleLine: {
  type: Boolean,
  default: false
},
rounded: {
  type: Boolean,
  default: false
},
value: {
  type: String,
  default: ""
},
label: {
  type: String,
  default: "Enter a Phone Number"
},
placeholder: {
  type: String,
  default: () => getDefault("placeholder")
},
disabledFetchingCountry: {
  type: Boolean,
  default: () => getDefault("disabledFetchingCountry")
},
disabled: {
  type: Boolean,
  default: () => getDefault("disabled")
},
mode: {
  type: String,
  default: () => getDefault("mode")
},
invalidMsg: {
  type: String,
  default: () => getDefault("invalidMsg")
},
required: {
  type: Boolean,
  default: () => getDefault("required")
},
allCountries: {
  type: Array,
  default: () => getDefault("allCountries")
},
defaultCountry: {
  // Default country code, ie: 'AU'
  // Will override the current country of user
  type: String,
  default: () => getDefault("defaultCountry")
},
preferredCountries: {
  type: Array,
  default: () => getDefault("preferredCountries")
},
onlyCountries: {
  type: Array,
  default: () => getDefault("onlyCountries")
},
ignoredCountries: {
  type: Array,
  default: () => getDefault("ignoredCountries")
},
autocomplete: {
  type: String,
  default: () => getDefault("autocomplete")
},
autofocus: {
  type: Boolean,
  default: () => getDefault("autofocus")
},
name: {
  type: String,
  default: () => getDefault("name")
},
wrapperClasses: {
  type: [String, Array, Object],
  default: () => getDefault("wrapperClasses")
},
inputId: {
  type: String,
  default: () => getDefault("inputId")
},
inputOptions: {
  type: Object,
  default: () => getDefault("inputOptions")
},
maxLen: {
  type: Number,
  default: () => getDefault("maxLen")
},
validCharactersOnly: {
  type: Boolean,
  default: () => getDefault("validCharactersOnly")
}