Vue implementiert Multi-Grid-Eingabefeld auf mobilem Endgerät

<div Klasse="verify-tel">
    <h1>SMS-Verifizierung</h1>
    <h2>SMS-Verifizierung</h2>
    <div>
        <input ref="pwd" :maxlength="ziffern.länge" v-model="msg" style="position: absolute;z-index: -1;opacity: 0"/>
        <ul Klasse="pwd-wrap" @click="Fokus">
            <li v-for="(Element, Schlüssel) in Ziffern" :style="{'margin-right': (100-10*Ziffern.Länge)/(Ziffern.Länge-1)+'%','Breite':'10%'}" >
                <span v-if="msgLength > Schlüssel">{{msg.substring(Schlüssel,Schlüssel+1)}}</span>
            </li>
        </ul>
    </div> 
</div>

html,Text{
    Breite: 100 %;
    Höhe: 100%;
    Hintergrund: #fbf9fe;
  }
  .verify-tel{
    Hintergrundfarbe: #f9f9f9;   
    Rand: 0 30px;
    >p{
      Farbe: rot;
      Schriftstärke: fett;
      Rand oben: 40px;
      Rand unten: 30px;
    }
    >h1{
      Schriftstärke: 400;
      Rand unten: 0;
    }
    >h2{
      Rand oben: 0;
      Schriftstärke: 400;
      Schriftgröße: 14px;
      Farbe: #858585;
    }
    .Eingabefeld{
      Rand oben: 30px;
      >Eingabe{
        Breite: 10%;
        Rand: keiner;
        Rahmen unten: 1px durchgehend grau;
        Hintergrundfarbe: #f9f9f9;
        Textausrichtung: zentriert;
        Rand rechts: 18 %;
        Schriftgröße: 35px;
        &:Fokus{
          Rahmen unten: 1px durchgehendes tiefes Himmelblau;
        }
        &:letzter-vom-Typ{
          Rand rechts: 0 !wichtig;
        }
      }
    }
    .btn-box{
      >Schaltfläche{
        Höhe: 40px;
        Rand: 1px durchgezogen #4e8cee;
        Farbe: #4e8cee;
        Hintergrundfarbe: weiß;
        Rahmenradius: 4px;
        Breite: 30%;
        &:letzter-vom-Typ{
          schweben: rechts;
          Breite: 65 %;
          Höhe: 40px;
          Farbe: weiß;
          Hintergrundfarbe: RGB (78,140,238);
          Rahmenradius: 4px;
        }
      }
    }
  }
  .pwd-wrap{
    Polsterung links: 0;
    Breite: 100 %;
    Höhe: 44px;
    Polsterung unten: 1px;
    Rand: 0 automatisch;
    Anzeige: Flex;
    Anzeige: -webkit-box;
    Anzeige: -webkit-flex;
    Cursor: Zeiger;
    Rand: keiner;
    Hintergrundfarbe: #f9f9f9;
  }
  .pwd-wrap li{
    Listenstiltyp: keiner;
    Textausrichtung: zentriert;
    Zeilenhöhe: 44px;
    -WebKit-Box-Flex: 1;
    biegen: 1;
    -webkit-flex: 1;
    Rand: keiner;
    Rahmen unten: 1px, durchgehend schwarz;
    Hintergrundfarbe: #f9f9f9;
    &:letzter-vom-Typ{
      Rand rechts: 0 !wichtig;
    }
    >spanne{
      Schriftgröße: 20px;
    }
  }
  .pwd-wrap li:letztes-Kind{
    Rand rechts: 0;
  }
  .pwd-wrap li i{
    Höhe: 10px;
    Breite: 10px;
    Randradius: 50 %;
    Hintergrund: #000;
    Anzeige: Inline-Block;
  }

<Skript>
  Standard exportieren{
    Daten(){
      zurückkehren {
        Seite: 0, // 1 ist für SMS-Verifizierungsziffern: ['','','','','',''], // Eingabefeld-Ziffernsteuerung, wie viele „Eingabefelder“ können hier konfiguriert werden
        Nachricht:'',
        msgLänge:0,
      }
    },
    Methoden:{
      //Schnittstellenfunktion zur Überprüfung der Mobiltelefonnummer verifyTels:async function () {
        versuchen{
        }fangen(e){
          console.log(e)
        }
      },
      //Dem Eingabefeld den Fokus geben focus(){
        dies.$refs.pwd.focus(); 
      },
    },
    vorMount:Funktion () {
        //Da meine geschäftlichen Anforderungen mehrere Seiten erfordern und Ziffern von der übergeordneten Komponente übertragen werden, verstecke ich diese und es bleibt nur eine Codezeile übrig.
        diese.seite=1;
    },
    betrachten:
      msg(aktuellerWert){
        //Überwachen Sie die Eingabelänge. Wenn die Eingabe vollständig ist, rufen Sie automatisch die Überprüfungsschnittstellenfunktion auf, if(curVal.trim().length===this.digits.length){
           dies.verifyTels(); 
        }
        this.msgLength = aktuelleVal.Länge;
      },
      'Seite':{
        handler:Funktion (neuerWert, alterWert) {
          wenn(alterWert==0&&neuerWert==1){
            //Wenn die Seite zum ersten Mal aufgerufen wird, wird der Fokus automatisch erhalten. Dies kann optimiert werden.
            Dies.Timer = setTimeout(()=>{this.$refs.pwd.focus()},500);
          }
        },
        tief:wahr
      }
    },
    vorZerstören:Funktion () {
      : LöscheTimeout(diesen.Timer);
    }
  }
</Skript>