VUE时间轴播放组件
weixin_45306637 人气:1先上效果图吧
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、正常父组件调用
加载全部内容