VUE implementiert eine Timeline-Wiedergabekomponente

<script src='../static/js/timePlay.js'></script>
<link href='../static/css/timePlay.css' rel='stylesheet'/>

<Vorlage>
  <div>
    <div Klasse="Zeit-Inhalt" id="ZeitSpiel"></div>
  </div>
</Vorlage>

<Skript>
var timeplay = "";
Standard exportieren {
  Daten() {
    zurückkehren {};
  },
  Methoden: {
    initTimePlay() {
      lass _this = dies;
      $("#timePlay").html("");
      Zeitspiel = neues Zeitspiel({
        Datum auswählen: _this.$store.state.trackPlayback.currentSelectDate,
        beiKlickÄnderungsende: Funktion () {
          //Rückruf nach dem Klick},
        onAnimateEnd: Funktion () {
        //Rückruf jedes Mal, wenn die Zeitleistenanimation endet},
      });
      //Initialisiere das Datum der Zeitleiste var curr_date = new Date(timeplay.options.selectDate);
      var Stunde = curr_date.getHours();
      var minute = curr_date.getMinutes();
      var Sekunde = curr_date.getSeconds();
      timeplay.options.startDate = parseInt(
        "" +
          (Stunde > 9 ? Stunde : "0" + Stunde) +
          (Minute > 9 ? Minute : "0" + Minute) +
          (Sekunde > 9 ? Sekunde : "0" + Sekunde)
      );
      timeplay.options.endDate = parseInt(
        "" +
          (Stunde + 1 > 9 ? Stunde + 1 : "0" + (Stunde + 1)) +
          (Minute > 9 ? Minute : "0" + Minute) +
          (Sekunde > 9 ? Sekunde : "0" + Sekunde)
      );
      $("#pause").klick(function () {
        timeplay.delayAnimation(); //Animation verzögern});

      $("#abspielen").klick(Funktion () {
        console.log("Starten Sie die Wiedergabe")
        timeplay.continueAnimation(); //Animation fortsetzen});
      //Klicken, um die Ausführung anzuhalten$(".play").click(function () {
      });
    },
  },
  montiert() {
    dies.initTimePlay();
    window.timePlayLeft = $(".timeProgress-box").offset().left;
  },
  }
</Skript>

<Stil>
</Stil>