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

vue禁止输入框输入

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

International Telephone Input with Vue.

Vue的国际电话输入。

View demo 查看演示 View Github 查看Github

入门 (Getting started)

• Install the plugin:

  安装插件：

  npm install vue-tel-input

• Add the plugin into your app:

  将插件添加到您的应用中：

  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组件：

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

安装 (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:

或直接使用组件：

<!-- your-component.vue-->
<template>
  <vue-tel-input v-model="value"></vue-tel-input>
</template>
<script>
import { VueTelInput } from 'vue-tel-input'

export default {
  components: {
    VueTelInput,
  },
};
</script>

浏览器 (Browser)

Include vue-tel-input in the page.

在页面中包括vue-tel-input 。

<script src="https://unpkg.com/vue-tel-input"></script>

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's abstractField mixin

  使用vue-form-generator的abstractField mixin添加组件

  <!-- tel-input.vue -->
    <template>
      <vue-tel-input v-model="value"></vue-tel-input>
    </template>
  
    <script>
    import { abstractField } from 'vue-form-generator';
  
    export default {
      name: 'TelephoneInput',
      mixins: [abstractField],
    };
    </script>

• Register the new field as a global component

  将新字段注册为全局组件

  import Vue from 'vue';
    import TelInput from '<path>/tel-input.vue';
  
    Vue.component('field-tel-input', TelInput);

• Now it can be used as tel-input in schema of vue-form-generator

  现在，它可以用作vue-form-generator模式中的tel-input

  var 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禁止输入框输入