脚本宝典收集整理的这篇文章主要介绍了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实现时间轴播放组件全部内容,希望文章能够帮你解决VUE实现时间轴播放组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。