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即可实现上图效果

相关推荐
一只小风华~15 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
十碗饭吃不饱33 分钟前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.1 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
切糕师学AI1 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
每天吃饭的羊2 小时前
state和ref
前端·javascript·react.js
GEO_YScsn2 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing2 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
摇滚侠2 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
GISer_Jing2 小时前
滴滴二面准备(一)
前端·javascript·面试·ecmascript
lecepin2 小时前
AI Coding 资讯 2025-09-10
前端·javascript·面试