vue禁止输入框输入

(vue-tel-input)

International Telephone Input with Vue.

Vue的国际电话输入。




Vue3 element plus防止文本框空格_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 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-generatorabstractField 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 }

下拉选项,支持disabledDialCodetabindex

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