vue-otp-input是用于一次性密码输入的可自定义PIN代码组件。

变更日志：

v1.0.8（06/16/2020）

• 更新依赖

下载安装:

# NPM
$ npm install @bachdgvn/vue-otp-input --save

使用：

1.在vue.js之后安装并导入组件。

import OtpInput from "@bachdgvn/vue-otp-input";

2.注册组件。

Vue.component("v-otp-input", OtpInput);

3.在您的应用模板中创建一次性密码输入组件。

<template>
  <div>
    <v-otp-input
      inputClasses="otp-input"
      :numInputs="4"
       separator="-"
      :shouldAutoFocus="true"
      @on-complete="handleOnComplete"
      @on-change="handleOnChange"
    />
  </div>
</template>

4.更改密码输入并完全填满后，请执行一些操作。

export default {
  methods: {
    handleOnComplete(value) {
      console.log("OTP: ", value);
    },
    handleOnChange(value) {
      console.log("OTP: ", value);
    }
  }
};

5.将自己的CSS应用于密码输入。

.otp-input {
  width: 40px;
  height: 40px;
  padding: 5px;
  margin: 0 10px;
  font-size: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  textalign: "center";
}
.error {
  border: 1px solid red !important;
}

6.所有可能的props 都可以自定义密码输入。

numInputs: {
  default: 4,
},
separator: {
  type: String,
  default: '**',
},
inputClasses: {
  type: String,
},
isInputNum: {
  type: Boolean,
},
shouldAutoFocus: {
  type: Boolean,
  default: false,
}

---

官网：https://github.com/bachdgvn/vue-otp-input

演示：https://www.vue365.cn/code_demo.php?id=193

GitHub下载：https://github.com/bachdgvn/vue-otp-input/archive/master.zip