Vue前端实现6位验证码输入框效果

这是一个输入六位验证码的弹窗,在输入一位数字可以自动跳到下一个输入框,和删除当前输入框的内容后聚焦到上一个输入框,并且输满六位验证码后调接口验证验证码是否正确.
今天想简单分享一下,当然也有参考过一些大神的代码,最后才实现了这样的效果,如果有错误还请多指教

先看看效果：

效果图片

源代码

1.template代码

<template>
  <div class="container">
    <div class="modal-backdrop"  v-show="isModalVisible"    @click="closeBackground"  >
      <div class="modal" @click.stop>
      <div class="font1">获取验证码</div>
      <div class="font2">验证码已发送至（+86）{
   {
   telephone}}</div>
      <div class="code-input-main" >
    <input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode1" 
        v-model="phoneCode0" 
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode2"
        v-model="phoneCode1"  
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode3" 
        v-model="phoneCode2" 
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode4" 
        v-model="phoneCode3"  
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode5" 
        v-model="phoneCode4" 
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern