vue禁止输入框输入_Vue国际电话输入

2023-11-24 10:06:05

vue禁止输入框输入

语音电话输入 (vue-tel-input)

International Telephone Input with Vue.

Vue的国际电话输入。

View demo 查看演示 View Github 查看Github

入门 (Getting started)

Install the plugin:

安装插件：
```
import Vue from 'vue'
import VueTelInput from 'vue-tel-input'Vue.use(VueTelInput)
```
More info on installation

有关安装的更多信息

Use the vue-tel-input component:

使用vue-tel-input组件：

Property	Type	Default value	Description
`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
`dropdownOptions`	`Object`	`{ disabledDialCode: false, tabindex: 0 }`	Options for dropdown, supporting `disabledDialCode` and `tabindex`
`dynamicPlaceholder`	`Boolean`	`false`	Placeholder as a sample phone number in the current country, available from v3.1.1
`enabledCountryCode`	`Boolean`	`false`	Enable country code in the input
`enabledFlags`	`Boolean`	`true`	Enable flags in the input
`ignoredCountries`	`Array`	`[]`	List of countries will NOT be shown on the dropdown. ie `['AU', 'BR']`
`inputClasses`	`String` \| `Array` \| `Object`	`''`	Custom classes for the `input`
`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...), available from v3.1.1
`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
`customValidate`	`Boolean` \| `RegExp`	`false`	Custom validation RegExp for input, available from v4.1.0

属性	类型	默认值	描述
`autocomplete`	`String`	`'on'`	本机输入“自动完成”属性
`autofocus`	`Boolean`	`false`	本机输入“自动对焦”属性
`defaultCountry`	`String`	`''`	默认国家/地区，将覆盖从用户IP地址获取的国家/地区
`disabled`	`Boolean`	`false`	禁用输入字段
`disabledFetchingCountry`	`Boolean`	`false`	禁用基于用户的IP地址获取当前国家/地区
`dropdownOptions`	`Object`	`{ disabledDialCode: false, tabindex: 0 }`	下拉选项，支持`disabledDialCode`和`tabindex`
`dynamicPlaceholder`	`Boolean`	`false`	占位符作为当前国家/地区的示例电话号码，可从v3.1.1获得
`enabledCountryCode`	`Boolean`	`false`	在输入中启用国家/地区代码
`enabledFlags`	`Boolean`	`true`	在输入中启用标志
`ignoredCountries`	`Array`	`[]`	国家列表将不会显示在下拉列表中。即`['AU', 'BR']`
`inputClasses`	`String` \| `Array` \| `Object`	`''`	`input`自定义类
`inputId`	`String`	`''`	`input`自定义“ id”
`inputOptions`	`Object`	`{ showDialCode: false, tabindex: 0 }`	输入选项，支持`showDialCode` (始终在输入中显示拨号代码)和`tabindex`
`maxLen`	`Number`	`25`	本机输入'maxlength'属性
`mode`	`String`	`''`	从v3.1.1开始，将数字格式设置为`'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`	`''`	包装器的自定义类
`customValidate`	`Boolean` \| `RegExp`	`false`	自定义验证RegExp用于输入，可从v4.1.0获得

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)	Available from v2.4.2

事件	争论	描述	笔记
`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`	国家变更(即使是第一次)时触发	从v2.4.2起可用

vue禁止输入框输入_Vue国际电话输入

语音电话输入 (vue-tel-input)

入门 (Getting started)

安装 (Installation)

npm (npm)

浏览器 (Browser)

用作vue-form-generator的自定义字段 (Use as a custom field of vue-form-generator)

用法 (Usage)

道具 (Props)

大事记 (Events)

插槽 (Slots)

打字稿支持 (Typescript Support)

vue禁止输入框输入_Vue国际电话输入

语音电话输入 (vue-tel-input)

入门 (Getting started)

安装 (Installation)

npm (npm)

浏览器 (Browser)

用作vue-form-generator的自定义字段 (Use as a custom field of vue-form-generator)

用法 (Usage)

道具 (Props)

大事记 (Events)

插槽 (Slots)

打字稿支持 (Typescript Support)

相关文章