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

この記事の例では、タイムライン再生コンポーネントを実装するためのVUEの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

まずはレンダリングを見てみましょう。

1. 初期化の効果！

2. ドラッグアンドドロップしてマウスを置くと時間が表示されます

3. 再生ボタンを押すと、左右の 2 本の水平線で前のページまたは次のページに移動できます。

VUE アクセスの手順は次のとおりです。

1. index.htmlにjsファイルとcssファイルを導入する

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

2. 時間制御コンポーネントTimePlay.vueを書く

<テンプレート>
  <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;
  },
  }
</スクリプト>

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

3. 通常の親コンポーネント呼び出し

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: