Vue实现简单实用的 6 位验证码输入框

最新推荐文章于 2026-03-24 12:09:28 发布

原创

最新推荐文章于 2026-03-24 12:09:28 发布 · 1.2w 阅读

标签

#VUE #CSS #输入框验证码 #特效

收录于

本文介绍如何在Vue项目中实现一个简单的6位验证码输入框。提供了两种方式：通过npm安装使用组件和直接引用源码。代码示例中包含了注意事项和如何自定义验证码长度。

效果图如上。GitHub地址(包括打包成浏览器组件)，感谢支持！！！

在开发中，我们可能会经常遇到验证码组件，上图就是我们设计师给的 UI

Remark：具体效果要看需求、样式还是要自己修改一下（可以自己传入 props 定义验证码的长度。）

-------------------------------------------

之前有小伙伴说没有效果，是因为我是贴了项目上的部分代码，颜色都是白色，现在已经设置了 #323232 , 可以直接看见效果啦。（！！！注意父级样式影响哦）

-------------------------------------------

方式一：直接 npm 安装使用

npm install @auspicious/vue-vercode

引入组件

<template>
  <div>
    <vue-vercode ref="vercode" />

    <p>
      <button @click="getCode">获取验证码</button>
    </p>
  </div>
</template>

<script>
import VueVercode from "@auspicious/vue-vercode";

export default {
  components: {
    "vue-verco