当前位置：首页 > news >正文

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

news 2025/5/22 2:08:08

实现效果
在这里插入图片描述
描述
使用uniapp和vue3实现了手机获取验证码后，输入验证码的输入框功能

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

<template><view class="container"><view class="input-container"><view v-for="index in 4" :key="index" class="verify-input"><inputtype="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 HTMLInputElementconst value = input.valueif (value) {// 更新输入值数组values.value[index] = value// 判断是否还有下一个输入框，如果有则聚焦if (index < 3) {nextTick(() => {focusIndex.value = index + 1const nextInput = inputRefs.value[index + 1]nextInput?.focus()})}// 判断是否所有输入框都已经有值，如果有则触发完成事件if (values.value.every((v) => v.length > 0)) {handleComplete()}} else {// 如果输入值为空，则聚焦前一个输入框if (index > 0) {focusIndex.value = index - 1nextTick(() => {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>