在这篇文章中，我们来学习一下“vue如何制作一个简易时间轴播放组件，代码是什么”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

本文实例为大家分享了VUE实现时间轴播放组件的具体代码，供大家参考，具体内容如下

先上效果图吧

1、初始化的效果!

2、可以拖拽，鼠标放上显示时间

3、播放按钮后，正常播放 左右两个横线可以上一页下一页

下面说VUE接入的步骤：

1、index.html中引入js和css文件

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

2、写个时间控件的组件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 () {
          //点击后回调
        },
        onAnimateEnd: function () {
        //时间轴动画每次结束回调
        },
      });
      //初始化时间轴日期
      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(); //延迟动画
      });

      $("#play").click(function () {
        console.log("开始播放")
        timeplay.continueAnimation(); //继续动画
      });
      //点击暂停执行
      $(".play").click(function () {
      });
    },
  },
  mounted() {
    this.initTimePlay();
    window.timePlayLeft = $(".timeProgress-box").offset().left;
  },
  }
</script>

<style>
</style>

3、正常父组件调用

以上就是关于“vue如何制作一个简易时间轴播放组件，代码是什么”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Nod.Js如何执行脚本，实时输出的实现方法是什么

  接到需求需要一个服务来执行shell脚本，要求可以实时打印shell脚本执行的过程，并看到脚本执行的结果。明确任务目标：这是一个web服务，需要执行shell脚本当一个脚本执行的时候，再次发送请求需要等待当前脚本执行完毕，再自动执行这次请求使用长连接而不是socket添加脚本不需要重启服务器这里采用的是express框架开始首先搭好express基本框架新建

• JavaScript中怎样实现输出星期几，方法是什么？

  这篇文章给大家分享的是JavaScript中实现输出星期几的方法。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 用vue框架制作触底查询功能的方法及代码是什么

  这篇文章主要为大家详细介绍了vue实现触底查询功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• jQuery中this是什么意思，怎样应用？

  jQuery中this是什么意思？一些新手可能对于jQuery中this及其应用不是很了解，对此篇就给大家来简单的介绍一下this以及this的使用，对大家学习和认识有用的的帮助，需要的朋友可以了解看看，接下来就跟随小编学习一下吧。

• 怎样用vue实现点赞动画效果？

  怎样用vue实现点赞动画效果？现在很多网站平台都有点赞功能，这篇文章就给大家分享怎样用vue实现一个好看的点赞动画，当点赞时，同时点亮爱心和增加点赞数，效果如下，感兴趣的朋友就继续往下看吧。