Vue implementiert eine Countdown-Schaltfläche für den Bestätigungscode

<div v-bind:class="{ 'text_email': isActive, 'text_tip': isTip }">{{tip}}</div> //Fehlermeldung<div class="input">
    <i class="ret_icon-email"></i>
    <Eingabe 
      Typ="Text" 
      v-model="E-Mail" 
      v-bind:class="{ 'input_email0' : hatFehler }" 
      v-on:click="Fehler abbrechen" 
      :placeholder="Geben Sie Ihre E-Mail-Adresse ein" 
      id="EingabeE-Mail"
    />
    <br />
    <input type="text" placeholder="Bestätigungscode eingeben" class="input_number" />
    <button class="btn_number" v-bind:class="{gray:wait_timer>0}" @click="getCode()">
        <span 
          Klasse="num_green" 
          v-show="Anzeigennummer" 
          v-bind:class="{num:wait_timer>0}"
        >{{this.wait_timer + "s"}}</span>
        <span 
          Klasse="Spannweite_Nummer" 
          v-bind:Klasse="{gray_span:wait_timer>0}"
        >{{ getCodeText() }}</span>
    </button>
    <br />
</div>

Daten() {
    zurückkehren {
      Tipp: "Passwort per E-Mail anfordern",
      isTip: false,
      istAktiv: wahr,
      showNum: false,
      wait_timer: falsch,
      hatFehler: falsch,
      E-Mail: ""
    }
},
Methoden: {
    Fehler abbrechen: Funktion (Ereignis) {
      dies.hasError = falsch;
      dies.istActive = wahr;
      dies.isTip = falsch;
      this.tip = "Passwort per E-Mail abrufen";
    },
    getCode: Funktion() {
      wenn (dieser.wait_timer > 0) {
        gibt false zurück;
      }
      wenn (!diese.email) {
        dies.hasError = wahr;
        dies.isActive = falsch;
        dies.istTip = wahr;
        this.tip = "E-Mail darf nicht leer sein";
        gibt false zurück;
      }
      Wenn (
        !/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
          diese.email
        )
      ) {
        dies.hasError = wahr;
        dies.isActive = falsch;
        dies.istTip = wahr;
        this.tip = "E-Mail-Adresse ist ungültig";
        gibt false zurück;
      }
      dies.showNum = wahr;
      dies.wait_timer = 120;
      var das = dies;
      var Timerintervall = Intervall festlegen(Funktion() {
        wenn (das.wait_timer > 0) {
          das.wait_timer--;
        } anders {
          Intervall löschen(Timerintervall);
        }
      }, 1000);

      //Rufen Sie hier Ajax auf, um den Bestätigungscode zu erhalten
    },
    getCodeText: Funktion() {
      wenn (dieser.wait_timer > 0) {
        Rückgabe "Gesendet";
      }
      wenn (this.wait_timer === 0) {
        dies.showNum = falsch;
        return "Bestätigungscode erneut senden!";
      }
      wenn (this.wait_timer === false) {
        return "Bestätigungscode senden!";
      }
    },
}

.ret_icon-email {
  Hintergrund: URL (../../assets/pics/email.svg) keine Wiederholung; //Das Bild ist ein lokales Bild, Breite: 20px;
  Höhe: 20px;
  Position: absolut;
  oben: 12px;
  links: 16px;
}
.input_email0 {
  Rand: 1px durchgezogen rgba(239, 83, 80, 1);
}
.Eingabenummer {
  Breite: 112px;
  Höhe: 44px;
  Texteinzug: 16px;
  Rand rechts: 12px;
}
.btn_Nummer {
  Breite: 154px;
  Höhe: 44px;
  Rahmenradius: 4px;
  Box-Größe: Rahmenbox;
  Rand: 1px durchgezogen rgba(76, 175, 80, 1);
  Zeilenhöhe: 16px;
  Gliederung: keine;
}
.span_nummer {
  Farbe: rgba (76, 175, 80, 1);
}
.btn_nummer.grau {
  Hintergrund: rgba(242, 244, 245, 1);
  Rand: 1px durchgezogen rgba(0, 0, 0, 0,05);
}
.span_number.grau_span {
  Farbe: #9a9c9a;
}
.num_grün.num {
  Farbe: rgba (76, 175, 80, 1);
}