# @bachdgvn/vue-otp-input 中文文档

规范地址：https://npmcn.com/package/%40bachdgvn/vue-otp-input/

版本：1\.0\.8
npm 元数据更新时间：2022-04-04T17:26:29.633Z
中文译文更新时间：2026-11-07T14:42:41.674Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bachdgvn/vue-otp-input
原文对照：https://npmcn.com/package/%40bachdgvn/vue-otp-input/?lang=original
项目主页：https://github.com/bachdgvn/vue-otp-input#readme
源码仓库：https://github.com/bachdgvn/vue-otp-input

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：870 kB，21 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- 首次发布：2019-02-14T02:20:36.651Z
- 最新版本发布：2020-06-16T15:47:51.176Z
- 近 30 天下载量：16677（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 0 个）

## 中文简介

一个完全自定义的,一次性的密码输入组件,用于用Vue 2.x构建的网络.

## 安装

```sh
npm install @bachdgvn/vue-otp-input
```

也可以使用：`pnpm add @bachdgvn/vue-otp-input`、`yarn add @bachdgvn/vue-otp-input`、`bun add @bachdgvn/vue-otp-input`

## README

# 输入

> 完全自定义的 OTP( 一次性密码) 输入组件, 由 Vue 2. x 所建 .

![Gifphy](https://media.giphy.com/media/W4RTzsjgQF447EfNPX/giphy.gif)

[现场直播](https://zlx025mxpp.codesandbox.io/)

## 安装

要安装最新的稳定版本 :

```
npm install --save @bachdgvn/vue-otp-input
```

导入到主. js :

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

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

代码示例 :

```javascript
<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** - 更新第一个稳定版本.

## 常见问题

### @bachdgvn/vue-otp-input 是什么？

一个完全自定义的,一次性的密码输入组件,用于用Vue 2\.x构建的网络\.

### 如何安装 @bachdgvn/vue-otp-input？

在项目目录运行 npm install @bachdgvn/vue-otp-input，或使用 pnpm add / yarn add / bun add。

### @bachdgvn/vue-otp-input 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bachdgvn\_\_vue-otp-input 是否存在。

### @bachdgvn/vue-otp-input 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bachdgvn/vue-otp-input 可以商用吗？

@bachdgvn/vue-otp-input 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bachdgvn/vue-otp-input 的下载量有多少？

根据 npm 官方下载统计，@bachdgvn/vue-otp-input 在 2026/10/08 – 2026/11/06 这 30 天内被下载 16,677 次，日均约 556 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bachdgvn/vue-otp-input 还在维护吗？

最新版本 1\.0\.8 发布于 2020/06/16（6 年前）；至今共发布 9 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/02/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。