@8bu/vue-otp-input 中文文档教程

Question

Simple Vue OTP Style Input

仅支持 Vue.js 2.2.x+

任何 polyfill 错误（缺少函数等）都可以通过导入 polyfill 库或为 webpack & 配置 polyfill 通天塔。 由于这个推荐

Working demo

Installation

Global:

// main
import Vue from 'vue';
import OTPInput from '@8bu/vue-otp-input';
Vue.use(OTPInput);

---

Component:

<script>
import OTPInput from '@8bu/vue-otp-input';
import '@8bu/vue-otp-input/';
module.export = {
  name: 'you-component',
  components: {
    'otp-input': OTPInput,
  }
}
</script>

Usage

<template>
  <otp-input
    v-model="userToken"
    class="field-container"
    :length="6"
    pattern="[^0-9]+"
    :ignorePattern="false"
    fieldClass="custom-field-class"
    :size="32"
    @valid="isTokenComplete"
    disabled={false}
  />
</template>

Properties

v-model 默认支持。

Prop	Type	Required	Default	Description
class	string	❌	❌	Outer class container
length	number/string	✔️	4	Number of expected characters
pattern	string	❌	[^0-9]+	Regex pattern of individual character input
ignorePattern	boolean	❌	false	Turn off character validation
fieldClass	string	❌	❌	Custom class for each input character
size	number/string	❌	16	Font size of input character (input size = 1.75 x font size).
disabled	boolean	❌	false	Working like native disabled
password	boolean	❌	false	Change all input type to password

Events

Name	Param: Type	Description
change	value: string	Return string result of user input
valid	isValid: boolean	Validate whenever user input to see if the input have been fully filled.

Limitation

移动设备可能没有 paste & 后退/删除功能。 我正在研究解决此问题的另一种方法。

Change logs

从 v1.2.0+ 开始，我会记录一些简单的更改日志来跟踪我的更改。

### 1.2.1

• Add submit event when user press Enter
• Focus is now select a whole input field

### 1.2.0

• Fix mobile input issue
• Update new prop password for changing input type to password

Contributions are welcome!

如果您想为此做出贡献，请阅读贡献指南

---