更新记录

1.0.0（2026-07-21） 下载此版本

v1.0.0 初始版本：支持 4/6 位数字验证码输入、方框/下划线两种风格、粘贴自动填充、输入完成回调、获取验证码倒计时。

平台兼容性

qsl-qsl-code-input 验证码输入框

纯前端、零依赖的验证码输入组件。登录 / 注册 / 绑定手机几乎每个 App 都要用，装完即用，无需任何后端或 Key。

• ✅ 支持 4 位 / 6 位
• ✅ 方框 box 与下划线 line 两种风格
• ✅ 自动聚焦弹键盘、点击格子重新聚焦
• ✅ 支持粘贴自动填充（仅保留数字）
• ✅ 输入完成 finish 回调
• ✅ 内置「获取验证码」按钮 + 60s 倒计时（可关）
• ✅ H5 / 微信小程序 / App（vue3）全平台

安装

通过 HBuilderX 导入插件，或把 uni_modules/qsl-qsl-code-input 目录拷贝进你的项目 uni_modules/ 即可。

使用

<template>
  <qsl-qsl-code-input
    v-model="code"
    :length="6"
    mode="box"
    btn-text="获取验证码"
    :countdown="60"
    @finish="onFinish"
    @get-code="onGetCode"
  />
</template>

<script setup>
import { ref } from 'vue'

const code = ref('')

function onFinish(val) {
  console.log('输入完成：', val)
}
function onGetCode() {
  // 在这里调用你的短信接口
  console.log('点击了获取验证码')
}
</script>

Props

Events

方法（defineExpose）

• clear() 清空并重新聚焦
• focus() 重新聚焦弹键盘

注意

• 小程序中自动聚焦（autoFocus）行为依赖基础库，部分情况下需在用户点击后才会弹键盘，属正常现象。
• 该组件只负责「输入与展示」，真正的发短信逻辑请在 @get-code 中自行对接后端。