VUE implements timeline playback component

This article example shares the specific code of VUE to implement the timeline playback component for your reference. The specific content is as follows

Let's take a look at the renderings first.

1. The effect of initialization!

2. You can drag and drop, and put the mouse on it to display the time

3. After pressing the play button, the two horizontal lines on the left and right can go to the previous page or the next page.

Here are the steps for VUE access:

1. Introduce js and css files in index.html

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

2. Write a time control component TimePlay.vue

<template>
  <div>
    <div class="time-content" id="timePlay"></div>
  </div>
</template>

<script>
var timeplay = "";
export default {
  data() {
    return {};
  },
  methods: {
    initTimePlay() {
      let _this = this;
      $("#timePlay").html("");
      timeplay = new TimePlay({
        selectDate: _this.$store.state.trackPlayback.currentSelectDate,
        onClickChangeEnd: function () {
          //Callback after clicking},
        onAnimateEnd: function () {
        //Callback every time the timeline animation ends},
      });
      //Initialize the timeline date var curr_date = new Date(timeplay.options.selectDate);
      var hour = curr_date.getHours();
      var minute = curr_date.getMinutes();
      var second = curr_date.getSeconds();
      timeplay.options.startDate = parseInt(
        "" +
          (hour > 9 ? hour : "0" + hour) +
          (minute > 9 ? minute : "0" + minute) +
          (second > 9 ? second : "0" + second)
      );
      timeplay.options.endDate = parseInt(
        "" +
          (hour + 1 > 9 ? hour + 1 : "0" + (hour + 1)) +
          (minute > 9 ? minute : "0" + minute) +
          (second > 9 ? second : "0" + second)
      );
      $("#pause").click(function () {
        timeplay.delayAnimation(); //delay animation});

      $("#play").click(function () {
        console.log("Start playing")
        timeplay.continueAnimation(); //Continue animation});
      //Click to pause execution$(".play").click(function () {
      });
    },
  },
  mounted() {
    this.initTimePlay();
    window.timePlayLeft = $(".timeProgress-box").offset().left;
  },
  }
</script>

<style>
</style>

3. Normal parent component call

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: