您现在的位置是:网站首页> 编程资料编程资料
Vue如何实现简单的时间轴与时间进度条_vue.js_
2023-05-24
308人已围观
简介 Vue如何实现简单的时间轴与时间进度条_vue.js_
前言
项目需要按天播放地图等值线图功能,所以需要一个时间进度条,网上找了一下发现没有自己需要的样子,于是只能简单的写一个。
1、封装时间尺度组件
{{item}}
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实现时间轴内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
相关内容
- 10分钟带你上手Vue3中新增的API_vue.js_
- Vue3中defineEmits、defineProps 不用引入便直接用_vue.js_
- Vue element-ui中表格过长内容隐藏显示的实现方式_vue.js_
- vue打包报错:ERROR in static/js/xxx.js from UglifyJs undefined问题_vue.js_
- swiper在vue中的简单使用方法_vue.js_
- axios+vue请求时携带cookie的方法实例_vue.js_
- vue路由警告:Duplicate named routes definition问题_vue.js_
- JS中fetch()用法实例详解_javascript技巧_
- 在React项目中使用TypeScript详情_React_
- uniapp路由uni-simple-router实例详解_javascript技巧_



