vuetify ip输入_Vuetify国际电话输入

vuetify ip输入

vue电话输入vuetify (vue-tel-input-vuetify)

International Telephone Input with Vuetify.

Vuetify的国际电话输入。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

示例存储库 (Example Repository)

You might want to follow and use the basic example usage of this library in this repository Example

你可能想要关注和使用这个库的基本用法示例在这个仓库例

OR try from scratch with below steps

或者按照以下步骤从头开始尝试

Vue-Cli (vue-cli)

• create new vue project using vue-cli:

  使用vue-cli创建新的vue项目：

vue create my-app
  cd my-app

证明 (vuetify)

• install vuetify to newly created vue project

  将vuetify安装到新创建的vue项目

vue add vuetify

npm (npm)

• install vue-tel-input-vuetify to newly created vue project

  将vue-tel-input-vuetify安装到新创建的vue项目

npm install vue-tel-input-vuetify

Install the plugin into Vue:

将插件安装到Vue中：

With vuetify loader:

使用vuetify loader：

// src/plugins/vuetify.js

  import Vue from 'vue';
  import Vuetify from 'vuetify/lib';

  Vue.use(Vuetify);

  export default new Vuetify({
  });

// src/VueComponent.js

import VueTelInputVuetify from "vue-tel-input-vuetify/lib/vue-tel-input-vuetify.vue"

<template>
  <vue-tel-input-vuetify></vue-tel-input-vuetify>
</template>

export default {
  components: {
    VueTelInputVuetify,
  },
};

// src/main.js

import Vue from 'vue';
import vuetify from "@/plugins/vuetify";

new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

Without vuetify loader:

没有vuetify加载程序：

// src/plugins/vuetify.js

  import Vue from 'vue';
  import Vuetify from 'vuetify';
  import 'vuetify/dist/vuetify.min.css'

  Vue.use(Vuetify);

  export default new Vuetify({
  });

// src/main.js

import Vue from 'vue';
import VueTelInputVuetify from "vue-tel-input-vuetify";
import vuetify from "./plugins/vuetify";

Vue.use(VueTelInputVuetify, {
  vuetify,
});

new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

View all available options in Props.

在“ 道具”中查看所有可用选项。

Use the vue-tel-input-vuetify component:

使用vue-tel-input-vuetify组件：

<template>
  <vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
<template>

<script>
export default {
  data() {
    return {
      phone: null
    }
  }
};
</script>

用法 (Usage)

道具 (Props)

Property	Type	Default value	Description
messages	String | Array	[]	Displays a list of messages or message if using a string
success-messages	String | Array	[]	Puts the input in a success state and passes through custom success messages.
error-messages	String | Array	[]	Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
hint	String	undefined	Hint text
suffix	String	undefined	Displays suffix text
prefix	String	undefined	Displays prefix text
background-color	String	undefined	Changes the background-color of the input
rules	String	Array	Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message
loader-height	Number | String	2	Specifies the height of the loader
loading	String | Boolean	false	Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color
hide-details	String | Boolean	undefined	Hides hint and validation errors. When set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display
clearable	Boolean	false	Add input clear functionality, default icon is Material Icons clear
filled	Boolean	false	Applies the alternate filled input style
full-width	Boolean	false	Designates input type as full-width
flat	Boolean	false	Removes elevation (shadow) added to element when using the solo or solo-inverted props
light	Boolean	false	Applies the light theme variant to the component.
validate-on-blur	Boolean	false	Delays validation until blur event
outlined	Boolean	false	Applies the outlined style to the input
persistent-hint	Boolean	false	Forces hint to always be visible
readonly	Boolean	false	Puts input in readonly state
error	Boolean	false	Puts the input in a manual error state
success	Boolean	false	Puts the input in a manual success state
shaped	Boolean	false	Round if outlined and increase border-radius if filled. Must be used with either outlined or filled
single-line	Boolean	false	Label does not move on focus/dirty
rounded	Boolean	false	Adds a border radius to the input
value	any	''	The input's value
label	String	'Enter a Phone Number'	Native input 'label' attribute
autocomplete	String	'on'	Native input 'autocomplete' attribute
autofocus	Boolean	false	Native input 'autofocus' attribute
defaultCountry	String	''	Default country, will override the country fetched from IP address of user
disabled	Boolean	false	Disable input field
disabledFetchingCountry	Boolean	false	Disable fetching current country based on IP address of user
ignoredCountries	Array	[]	List of countries will NOT be shown on the dropdown. ie ['AU', 'BR']
inputId	String	''	Custom 'id' for the input
inputOptions	Object	{ showDialCode: false, tabindex: 0 }	Options for input, supporting showDialCode (always show dial code in the input) and tabindex
maxLen	Number	25	Native input 'maxlength' attribute
mode	String	''	Format number to 'international' (with + dial code) or 'national' (with 0...)
name	String	'telephone'	Native input 'name' attribute
onlyCountries	Array	[]	List of countries will be shown on the dropdown. ie ['AU', 'BR']
placeholder	String	'Enter a phone number'	Placeholder for the input
preferredCountries	Array	[]	Preferred countries list, will be on top of the dropdown. ie ['AU', 'BR']
required	Boolean	false	Required property for HTML5 required attribute
validCharactersOnly	Boolean	false	Only allow valid characters in a phone number (will also verify in mounted, so phone number with invalid characters will be shown as an empty string)
wrapperClasses	String | Array | Object	''	Custom classes for the wrapper

属性	类型	默认值	描述
messages	String | Array	[]	显示消息列表或消息(如果使用字符串)
success-messages	String | Array	[]	将输入置于成功状态，并传递自定义成功消息。
error-messages	String | Array	[]	将输入置于错误状态并传递自定义错误消息。 将与规则属性中发生的所有验证结合在一起。 该字段不会触发验证
hint	String	undefined	提示文字
suffix	String	undefined	显示后缀文字
prefix	String	undefined	显示前缀文本
background-color	String	undefined	更改输入的背景色
rules	String	Array	接受将输入值作为参数的函数数组，并返回true / false或带错误消息的字符串
loader-height	Number String	2	指定装载机的高度
loading	String | Boolean	false	显示线性进度条。 可以是指定将哪种颜色应用于进度栏的字符串(任何材料颜色或主题颜色-主，辅，成功，信息，警告，错误)，也可以是使用组件颜色的布尔值(由颜色属性设置-如果是由组件支持)或原色
hide-details	String | Boolean	undefined	隐藏提示和验证错误。 设置为自动时，仅当有消息(提示，错误消息，计数器值等)显示时才会呈现消息
clearable	Boolean	false	添加输入清除功能，默认图标为“材料图标”清除
filled	Boolean	false	应用替代填充输入样式
full-width	Boolean	false	将输入类型指定为全角
flat	Boolean	false	当使用独奏或反转的道具时，删除添加到元素的高程(阴影)
light	Boolean	false	将浅色主题变体应用于组件。
validate-on-blur	Boolean	false	延迟验证直到模糊事件
outlined	Boolean	false	将轮廓样式应用于输入
persistent-hint	Boolean	false	强制提示始终可见
readonly	Boolean	false	将输入置于只读状态
error	Boolean	false	将输入置于手动错误状态
success	Boolean	false	将输入置于手动成功状态
shaped	Boolean	false	如果勾勒出圆角，则填满，增加边界半径。 必须与概述或填充一起使用
single-line	Boolean	false	标签没有移到焦点/脏处
rounded	Boolean	false	将边界半径添加到输入
value	any	''	输入值
label	String	'Enter a Phone Number'	本机输入“标签”属性
autocomplete	String	'on'	本机输入“自动完成”属性
autofocus	Boolean	false	本机输入“自动对焦”属性
defaultCountry	String	''	默认国家/地区，将覆盖从用户IP地址获取的国家/地区
disabled	Boolean	false	禁用输入字段
disabledFetchingCountry	Boolean	false	禁用基于用户的IP地址获取当前国家/地区
ignoredCountries	Array	[]	国家列表将不会显示在下拉列表中。 即['AU', 'BR']
inputId	String	''	input自定义“ id”
inputOptions	Object	{ showDialCode: false, tabindex: 0 }	输入选项，支持showDialCode (始终在输入中显示拨号代码)和tabindex
maxLen	Number	25	本机输入'maxlength'属性
mode	String	''	将数字格式设置为'international' (带+拨号代码)或'national' (带0 ...)
name	String	'telephone'	本机输入“名称”属性
onlyCountries	Array	[]	国家列表将显示在下拉列表中。 即['AU', 'BR']
placeholder	String	'Enter a phone number'	输入的占位符
preferredCountries	Array	[]	首选国家/地区列表将位于下拉列表的顶部。 即['AU', 'BR']
required	Boolean	false	HTML5必需属性的必需属性
validCharactersOnly	Boolean	false	仅允许电话号码中包含有效字符(也将在已mounted验证，因此电话号码中包含无效字符的情况将显示为空字符串)
wrapperClasses	String | Array | Object	''	包装器的自定义类

大事记 (Events)

Event	Arguments	Description	Notes
input	String, Object	Fires when the input changes with the argument is the object includes { number, isValid, country }	onInput deprecated
validate	Object	Fires when the correctness of the phone number changes (from true to false or vice-versa) and when the component is mounted { number, isValid, country }	onValidate deprecated
blur		Fires on blur event	onBlur deprecated
space		Fires on keyup.space event	onSpace deprecated
enter		Fires on keyup.enter event	onEnter deprecated
open		Fires when the flags dropdown opens
close		Fires when the flags dropdown closes
country-changed	Object	Fires when country changed (even for the first time)

事件	争论	描述	笔记
input	String Object	当输入随参数更改为对象包括{ number, isValid, country }时触发	不推荐使用onInput
validate	Object	当电话号码的正确性更改(从“ true到“ false或从“ true到“ false ，反之亦然)并且安装了组件{ number, isValid, country }时触发	不推荐使用onValidate
blur		在模糊事件上触发	不推荐使用onBlur
space		在keyup.space事件上触发	不onSpace使用onSpace
enter		在keyup.enter事件上触发	onEnter已弃用
open		当标志下拉列表打开时触发
close		当标志下拉列表关闭时触发
country-changed	Object	国家变更(即使是第一次)时触发

翻译自: https://vuejsexamples.com/international-telephone-input-with-vuetify/

vuetify ip输入