输入
完全自定义的 OTP( 一次性密码) 输入组件, 由 Vue 2. x 所建 .
安装
要安装最新的稳定版本 :
npm install --save @bachdgvn/vue-otp-input
导入到主. js :
import OtpInput from "@bachdgvn/vue-otp-input";
Vue.component("v-otp-input", OtpInput);
代码示例 :
<template>
<div style="display: flex; flex-direction: row;">
<v-otp-input
ref="otpInput"
input-classes="otp-input"
separator="-"
:num-inputs="4"
:should-auto-focus="true"
:is-input-num="true"
@on-change="handleOnChange"
@on-complete="handleOnComplete"
/>
<button @click="handleClearInput()">Clear Input</button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
handleOnComplete(value) {
console.log('OTP completed: ', value);
},
handleOnChange(value) {
console.log('OTP changed: ', value);
},
handleClearInput() {
this.$refs.otpInput.clearInput();
},
},
};
</script>
<style lang="less">
.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);
text-align: center;
&.error {
border: 1px solid red !important;
}
}
.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
道具
| 名称 |
类型 | 需求 | 默认 | 说明 |
|---|---|---|---|---|
| 数字输入 | 编号 | 真实 | 页:1 | 检察官办公室提供的投入数目. |
| 分隔符 | 组件 |
虚假 | 通过传递一个组件在输入之间提供一个自定义分隔符。 比如说, <span>-</span> 将添加 - 每个输入之间 |
|
| 输入类 | 类Name (字符串) | 虚假 | 无 | 应用样式或类传递给每个输入 . |
| 输入类型 | 字符串 | 虚假 | "电话" | 输入类型。 可选值:"密码","数字","电话". |
| 应自动聚焦 | 布尔 | 虚假 | 虚假 | 自动将输入的焦点集中在inital的页面负荷上. |
方法
| 名称 |
说明 |
|---|---|
| 清除输入( C) | 使用 $refs 来清除所有 otp 输入, 请参见代码示例部分 . |
活动
| 名称 |
说明 |
|---|---|
| 变动 | 当我们改变输入时 返回检察官办公室的代码正在改变. |
| 已完成 | 输入输入的返回OTP代码 . |
更改日志
- 页:1 - 修正#30:支持输入类型:"密码"
- 页:1 - 修正 # 23: 不接受外部键盘中数字键盘的数字
- 页:1 - 添加特性以禁止某些字符,如""或"e".
- 页:1 - 支持清除所有 OTP 输入的方法.
- v1.0.4 (中文(简体) ) - 支持@on-change事件,并修复每次按键盘时发射@on-complete的bug.
- 页:1 - 固定拳头和最后一个字符 不被修改和粘贴OTP代码.
- 页:1 - 更新第一个稳定版本.