VUEはタイムライン再生コンポーネントを実装します

<script src='../static/js/timePlay.js'></script>
<link href='../static/css/timePlay.css' rel='スタイルシート'/>

<テンプレート>
  <div>
    <div class="time-content" id="timePlay"></div>
  </div>
</テンプレート>

<スクリプト>
var タイムプレイ = "";
エクスポートデフォルト{
  データ（） {
    戻る {};
  },
  メソッド: {
    初期化タイムプレイ() {
      _this = this とします。
      $("#timePlay").html("");
      タイムプレイ = 新しいタイムプレイ({
        選択日付: _this.$store.state.trackPlayback.currentSelectDate、
        onClickChangeEnd: 関数 () {
          //クリック後のコールバック},
        onAnimateEnd: 関数 () {
        //タイムラインアニメーションが終了するたびにコールバックします},
      });
      //タイムラインの日付を初期化します。var curr_date = new Date(timeplay.options.selectDate);
      var 時間 = curr_date.getHours();
      var 分 = curr_date.getMinutes();
      var 秒 = curr_date.getSeconds();
      timeplay.options.startDate = parseInt(
        "" +
          (時間 > 9 ? 時間 : "0" + 時間) +
          (分 > 9 ? 分 : "0" + 分) +
          (秒 > 9 ? 秒 : "0" + 秒)
      );
      timeplay.options.endDate = parseInt(
        "" +
          (時間 + 1 > 9 ? 時間 + 1 : "0" + (時間 + 1)) +
          (分 > 9 ? 分 : "0" + 分) +
          (秒 > 9 ? 秒 : "0" + 秒)
      );
      $("#pause").click(関数() {
        timeplay.delayAnimation(); // アニメーションを遅延する});

      $("#play").click(関数() {
        console.log("プレイを開始")
        timeplay.continueAnimation(); //アニメーションを続行します});
      //クリックして実行を一時停止します$(".play").click(function () {
      });
    },
  },
  マウント() {
    これを初期化します。
    window.timePlayLeft = $(".timeProgress-box").offset().left;
  },
  }
</スクリプト>

<スタイル>
</スタイル>