vue禁止输入框输入_Vue国际电话输入
vue禁止输入框输入
语音电话输入 (vue-tel-input)
International Telephone Input with Vue.
Vue的国际电话输入。
入门 (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-inputcomponent:使用
vue-tel-input组件:
安装 (Installation)
npm (npm)
npm install vue-tel-input Install the plugin into Vue:
将插件安装到Vue中:
import Vue from 'vue'
import VueTelInput from 'vue-tel-input'Vue.use(VueTelInput, [globalOptions = {}]) // Define default global options here (optional) View all available options in Props.
在“ 道具”中查看所有可用选项。
Or use the component directly:
或直接使用组件:
浏览器 (Browser)
Include vue-tel-input in the page.
在页面中包括vue-tel-input 。
If Vue is detected in the Page, the plugin is installed automatically.
如果在页面中检测到Vue,则插件将自动安装。
Manually install the plugin into Vue:
手动将插件安装到Vue中:
Vue.use(VueTelInput) Or use the component directly:
或直接使用组件:
Vue.component('vue-tel-input', VueTelInput.VueTelInput) 用作vue-form-generator的自定义字段 (Use as a custom field of vue-form-generator)
Check out the setup in CodeSandbox.
在CodeSandbox中检查设置。
-
Add a component using
vue-form-generator'sabstractFieldmixin使用
vue-form-generator的abstractFieldmixin添加组件 -
Register the new field as a global component
将新字段注册为全局组件
import Vue from 'vue';import TelInput from '/tel-input.vue';Vue.component('field-tel-input', TelInput); -
Now it can be used as
tel-inputin schema ofvue-form-generator现在,它可以用作
vue-form-generator模式中的tel-inputvar schema: {fields: [{type: "tel-input",label: "Awesome (tel input)",model: "telephone"}] };
Read more on vue-form-generator's instruction page
在vue-form-generator的说明页面上内容
用法 (Usage)
道具 (Props)
Test all props on CodeSandbox.
在CodeSandbox上测试所有道具。
| 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获得 |
大事记 (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) | 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起可用 |
插槽 (Slots)
| Slot | Description | Notes |
|---|---|---|
arrow-icon | Replace the arrow next to the flag with a component of your choice | Available from v2.4.3 |
| 插槽 | 描述 | 笔记 |
|---|---|---|
arrow-icon | 用您选择的组件替换标志旁边的箭头 | 从v2.4.3起可用 |
打字稿支持 (Typescript Support)
If you work with typescript you will need declaration requirements.
如果使用打字稿,则需要声明要求。
npm install --save-dev @types/vue-tel-input 翻译自: https://vuejsexamples.com/international-telephone-input-with-vue/
vue禁止输入框输入
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
