VUE实现时间轴播放组件

2022-04-15 674

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

先上效果图吧

1、初始化的效果!

VUE实现时间轴播放组件

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

VUE实现时间轴播放组件

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

VUE实现时间轴播放组件

下面说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、正常父组件调用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持NICE源码。

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript VUE实现时间轴播放组件 https://www.niceym.com/18697.html

常见问题
  • 请您联系网站客服QQ,79024519,将第一时间处理您的问题,咨询请提供会员ID以及资源编号!
查看详情
  • 本站发布的压缩包如遇需要解压密码请尝试本站域名:www.niceym.com (通常为小写,如不对可试试大写) 或者:niceym.com 如遇无法解压,请您提供资源编号发送给本站客服!
查看详情