您现在的位置是:网站首页> 编程资料编程资料

Vue如何实现简单的时间轴与时间进度条_vue.js_

2023-05-24 309人已围观

简介 Vue如何实现简单的时间轴与时间进度条_vue.js_

前言

项目需要按天播放地图等值线图功能,所以需要一个时间进度条,网上找了一下发现没有自己需要的样子,于是只能简单的写一个。

1、封装时间尺度组件

2、在vue页面使用时间尺度 

首先引入组件 然后给组件外部包一层div  组件的大小是根据父级来的

初始化:在methods方法里调用组件内部的init方法初始化 传入三个参数

schedule事件是每当尺度变化会返回变化后的时间,可以根据时间做对应逻辑处理

import timescale from "../../components/timeScale.vue" this.$refs.timescale.init(this.isOlineTime,this.selectSectionTime[0],getTomorrow(this.selectSectionTime[1]))

3、组件init方法内 通过起止时间算出中间的所有时间尺度 

startTime:开始时间

endTime:结束时间

type:1按日返回小时 2按月返回每天 

export const getScopeTime = (startTime, endTime, type) => { let start = new Date(startTime).getTime() let end = new Date(endTime).getTime() let time = [] if (type == 2) { for (var i = 0; i < 1; i--) { start += 86400000 if (start == end) { time.unshift(startTime.split(' ')[0]) break } else { time.push(unixTimeToDateTime(start).split(' ')[0]) } } } else if (type == 1) { for (var i = 0; i < 1; i--) { start += 3600000 if (start == end) { time.unshift(startTime.split(' ')[0]) break } else { time.push(unixTimeToDateTime(start)) } } } return time }

附上效果图

目前没有实现拖拽功能,只能通过点击刻度更换时间,或者自动播放。

总结

到此这篇关于Vue如何实现简单的时间轴与时间进度条的文章就介绍到这了,更多相关Vue实现时间轴内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

-六神源码网