Verwenden Sie momentJs, um eine Countdown-Komponente zu erstellen (Beispielcode)

<Vorlage>
    <div Klasse="Tabelle rechts flex-a-center">
        <div Klasse="Zeit-Text">
            <span class="timeTextSpan" v-for="item,index of h" >{{item}}</span>
            <span class="timeTextSpan1" >: </span>
            <span class="timeTextSpan" v-for="item,index of m" >{{item}}</span>
            <span class="timeTextSpan1" >: </span>
            <span class="timeTextSpan" v-for="item,index of s" >{{item}}</span>
        </div>
    </div>
</Vorlage>

<Skript>
Moment aus „Moment“ importieren
Standard exportieren {
  Requisiten: {
    endTime: { }, //Letzte Empfangszeit 2021-12-17 16:29:20
  },
  Daten() {
    //Daten hier speichern return {
      h:'00',
      m:'00',
      s:'00',
      Timer: null
    };
  },
  betrachten:
    Endzeit: {
      handler(e) {
        wenn (e) {
          lass selbst = dies
          Intervall löschen(dieser.Timer)
          dieser.Timer = Intervall festlegen(Funktion(){self.init()},1000)
        }
      },
      tief: wahr,
      sofort: wahr
    }
  },
  montiert() {
    lass selbst = dies
    selbst.init()
    Intervall löschen(dieser.Timer)
    dieser.Timer = Intervall festlegen(Funktion(){self.init()},1000)
  },
  //Methodensammlung methods: {
    init(){
        lass Zeit = Moment(diese.Endzeit).diff(Moment())
        wenn(Zeit <= 0){
          Intervall löschen(dieser.Timer)
          dies.onOver()
          zurückkehren
        }
        sei t = Zeit / 1000;
        let d = Math.floor(t / (24 * 3600)); //Resttage, kannst du bei Bedarf nachholen let h = Math.floor((t - 24 * 3600 * d) / 3600) + d*24; //Keine Tage nötig, wandle Tage in Stunden um let _h = Math.floor((t - 24 * 3600 * d) / 3600) //Tage behalten und Stunden erhalten let m = Math.floor((t - 24 * 3600 * d - _h * 3600) / 60);
        sei s = Math.floor((t - 24 * 3600 * d - _h * 3600 - m * 60));
       
        dies.h = String(h).Länge == 1? '0'+String(h):String(h)
        dies.m = String(m).Länge == 1? '0'+String(m):String(m)
        this.s = Zeichenfolge(n).Länge == 1? '0'+Zeichenfolge(n):Zeichenfolge(n)
    },
    beiÜber() {
      this.$emit('over') //Rückruf, wenn der Countdown endet}
 
  },
  vorZerstören(){
    this.timer = null
    Intervall löschen(dieser.Timer)
  }
}
</Skript>
<Stil lang='less' scoped>
@import url("@/assets/css/supplier.less");
 

  .Tabelle-rechts {
    Schriftgröße: 12px;
    Farbe: #757e8a;
    .timeTextSpan{
      Anzeige: Inline-Block;
      Breite: 14px;
      Höhe: 22px;
      Textausrichtung: zentriert;
      Hintergrund: #F1F0F0;
      Rahmenradius: 2px;
      Rand rechts: 2px;
      Schriftgröße: 16px;
      Farbe: #ff8a2b;
      Schriftstärke: fett;
    }
    .timeTextSpan1{
      Anzeige: Inline-Block;
      Breite: 14px;
      Textausrichtung: zentriert;
      vertikale Ausrichtung: unten;
      Farbe: #202D40;
      Schriftgröße: 16px;
      Schriftstärke: fett;
    }
   
    .Zeittext {
      Rand links: 10px;
    }
  }
</Stil>