vue如何制作一个简易时间轴播放组件,代码是什�
Admin 2022-06-29 群英技术资�
本文实例为大家分享了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、正常父组件调用
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
目录自定义组件@click点击失效问题描述原因分析问题解决@click不起作用,同时报错自定义组件@click点击失效问题描述自定义组件在使无法,无法绑定原vue文件内的原生click事件原因分析根据查询vue官方文档,得知click事件作用于组件内部,如果组件内没有写click事件,便会无响应。问题解�1.参照官方�
回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步�
RPC是服务器和服务器之间的通信,它是基于TCP协议的,传输的数据是二进制,因此数据包要相比于http要小,同时解码数据更快。node中的net模块是创建RPC服务�
这篇文章主要为大家详细介绍了vue实现页面缓存功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要为大家详细介绍了VUE+SpringBoot实现分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078