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

实现效果

描述

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

具体实现代码

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

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