uniapp中基于vue3实现输入验证码功能

实现效果

描述

使用uniapp和vue3实现了手机获取验证码后,输入验证码的输入框功能

具体实现代码

下述代码为实现验证码输入框封装的组件VerificationCodeInput.vue

javascript 复制代码
<template>
  <view class="container">
    <view class="input-container">
      <view v-for="index in 4" :key="index" class="verify-input">
        <input
          type="number"
          class="input-field"
          :ref="`input${index - 1}`"
          :maxlength="1"
          :focus="focusIndex === index - 1"
          @input="handleInput(index - 1, $event)"
          @focus="handleFocus(index - 1)"
        />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'

// 焦点索引
const focusIndex = ref(0)
// 输入值数组
const values = ref<string[]>(['', '', '', ''])
// 输入框ref数组
const inputRefs = ref<(HTMLInputElement | null)[]>([])

/**
 * 处理每个输入值函数
 * @param index - 序号.
 * @param event - 输入事件对象.
 */
const handleInput = (index: number, event: Event) => {
  // 获取输入框的值
  const input = event.target as HTMLInputElement
  const value = input.value

  if (value) {
    // 更新输入值数组
    values.value[index] = value

    // 判断是否还有下一个输入框,如果有则聚焦
    if (index < 3) {
      nextTick(() => {
        focusIndex.value = index + 1
        const nextInput = inputRefs.value[index + 1]
        nextInput?.focus()
      })
    }

    // 判断是否所有输入框都已经有值,如果有则触发完成事件
    if (values.value.every((v) => v.length > 0)) {
      handleComplete()
    }
  } else {
    // 如果输入值为空,则聚焦前一个输入框
    if (index > 0) {
      focusIndex.value = index - 1
      nextTick(() => {
        const prevInput = inputRefs.value[index - 1]
        prevInput?.focus()
      })
    }
  }
}

// 处理焦点事件
const handleFocus = (index: number) => {
  focusIndex.value = index
}

// 处理完成事件
const handleComplete = () => {
  const code = values.value.join('')
  console.log('验证码输入完成:', code)
}

onMounted(() => {
  // 初始化焦点
  nextTick(() => {
    const firstInput = inputRefs.value[0]
    firstInput?.focus()
  })
})
</script>

<style>
.input-container {
  display: flex;
  justify-content: space-between;
}

.verify-input {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-field {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 24px;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
}
</style>

最后在父组件中引入VerificationCodeInput.vue即可实现上图效果

相关推荐
就改了1 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_3 分钟前
Ajax 入门
前端·javascript·ajax
奋飛27 分钟前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
sunbyte36 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟44 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor1 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter1 小时前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
呆呆的心1 小时前
JavaScript 深入理解闭包与柯里化:从原理到实践 🚀
javascript·面试
快起来别睡了1 小时前
看完这篇文章,你就知道什么是proxy
javascript
请你吃div1 小时前
JavaScript 实用函数大全(超实用)
前端·javascript·面试