vue3实现输入框短信验证码功能---全网始祖

本文主要是介绍vue3实现输入框短信验证码功能---全网始祖，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

组件功能分析
1.按键删除，清空当前input，并跳转prevInput & 获取焦点,按键delete，清空当前input，并跳转nextInput & 获取焦点。按键Home/End键，焦点跳转first/最后一个input输入框。ArrowLeft/ArrowRight键点击后跳转上一个/下一个输入框获取焦点。
2.判断按键为数字，则取第一个数字，然后跳转下一个input输入框获取焦点，如果为最后一个，则失去焦点，交互结束。
3.粘贴功能。通过el.clipboardData获取粘贴内容，判断是否为4/6位粘贴内容。是则赋值给页面Input，双向绑定一个数组即可。否则置为空。

代码展示

<template><div class="g-remove-check-code"><p class="g-remove-check-code_title">发送验证码</p><div class="g-remove-check-code"><p class="g-remove-check-code_title">请输入短信验证码以验证您的身份</p><divclass="g-remove-check-code_content"@keyup="fnCheckCodeKeyup"@keydown="fnCheckCodeKeydown"@paste="fnCheckCodeKeyPaste"@input="fnCheckCodeInputEvent"><input :class="{'g-code-input_color': aCheckCodeInputComputed[0] !== ''}" max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="aCheckCodeInputComputed[0]" type="text" ref="firstInputRef" /><input :class="{'g-code-input_color': aCheckCodeInputComputed[1] !== ''}" max="9" min="0" maxlength="1" data-index="1" v-model.trim.number="aCheckCodeInputComputed[1]" type="text" /><input :class="{'g-code-input_color': aCheckCodeInputComputed[2] !== ''}" max="9" min="0" maxlength="1" data-index="2" v-model.trim.number="aCheckCodeInputComputed[2]" type="text" /><input :class="{'g-code-input_color': aCheckCodeInputComputed[3] !== ''}" max="9" min="0" maxlength="1" data-index="3" v-model.trim.number="aCheckCodeInputComputed[3]" type="text" /></div></div><div class="btn-box"><button:disabled="!turnOff"content-text="下一步"@clickEvent="enter"/></div></div>
</div>
</template><script lang="ts" setup>
import { defineComponent, ref, onMounted, onUnmounted, reactive, computed, getCurrentInstance, inject  } from "vue";let aCheckCodeInput