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

相关推荐
codingandsleeping15 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风16 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780016 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端16 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧16 小时前
Promise 的使用
前端·javascript
用户516816614584117 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅17 小时前
JavaScript 作用域
前端·javascript
前端缘梦17 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
云枫晖18 小时前
JS核心知识-事件循环
前端·javascript
Simon_He18 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown