前言

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

1、封装时间尺度组件

<!-- 时间尺度 -->
<template>
	<div class="time">
		<div class="time_menu" v-show="timeList.length != 0">
			<template v-if="playState">
				<el-tooltip class="item" effect="dark" content="暂停" placement="top-end">
					<img src="../assets/timescale/zt.png" @click="playState = false,stopInterval()" />
				</el-tooltip>
			</template>
			<template v-if="!playState">
				<el-tooltip class="item" effect="dark" content="播放" placement="top-end">
					<img src="../assets/timescale/bf.png" @click="playState = true,startInterval()" />
				</el-tooltip>
			</template>
			<el-tooltip class="item" effect="dark" content="上一天" placement="top-end">
				<img src="../assets/timescale/icons_next.png" @click="upTime()" style="transform: rotate(180deg);" />
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="下一天" placement="top-end">
				<img src="../assets/timescale/icons_next.png" @click="nextTime()" />
			</el-tooltip>
		</div>
		<div style="width: 80%;height: 100%;position: relative;display: flex;align-items: flex-end;overflow: auto;">
			<div style="height: 40%;display: flex;flex-shrink: 0;flex-flow: row nowrap;align-items: flex-end;">
				<template v-for="(item,index) in timeList">
					<el-tooltip class="item" effect="dark" :content="item" placement="top-end">
						<div class="keDuXian" :style="index%5 == 0 ? 'height:100%;':'height:60%;'" :id="item"
							@click="timeClick(item)">
							<template v-if="index > 0">
							<div v-if="index%5 == 0" style="position: relative;top: -20px;left:-30px;color: #FFF;width: 70px;font-size: 0.75rem;">
								{{item}}
							</div>
							</template>
							</div>
					</el-tooltip>
				</template>
			</div>
			<div v-show="timeList.length != 0" class="progress" :style="'width:' progresswidth 'px;'">
				<div style="width: 100%;height: 40%;background-color: rgb(20,170,255);">
				</div>
			</div>
			<img v-show="timeList.length != 0" src="../assets/timescale/xsjx.png" class="progressImg" :style="'left:' (progresswidth == 0 ? -7 : (progresswidth-8)) 'px;'" />
		</div>
	</div>
</template>
 
<script>
	import {getScopeTime} from "../utils/regular.js"
	export default {
		data() {
			return {
				timeList:[],
				thisTime: '',
				progresswidth: 0,
				playState: false,
				Interval:'',
			}
		},
		beforeDestroy(){
			clearInterval(this.Interval)
		},
		methods: {
			startInterval(){
				this.Interval = setInterval(() => {
					if(this.timeList.indexOf(this.thisTime) 1 == this.timeList.length){
						this.playState =  false
						this.stopInterval()
					}else{
						this.thisTime = this.timeList[this.timeList.indexOf(this.thisTime)   1]
					}
					this.setProgressWidth()
				}, 4000)
			},
			stopInterval(){
				clearInterval(this.Interval)
			},
			init(time,start,end) {
				this.timeList = getScopeTime(start,end,2)
				this.thisTime = time
				this.$nextTick(()=>{
					this.setProgressWidth()
				})
			},
			timeClick(time) {
				this.thisTime = time
				this.setProgressWidth()
			},
			setProgressWidth(){
				this.progresswidth = document.getElementById(this.thisTime).offsetLeft
				this.$emit('schedule',this.thisTime)
			},
			upTime(){
				if(this.thisTime == this.timeList[0]){
					this.$message({
						message: '已经是第一天了',
						type: 'warning'
					});
				}else{
					this.thisTime = this.timeList[this.timeList.indexOf(this.thisTime)-1]
					this.setProgressWidth()
				}
			},
			nextTime(){
				if(this.thisTime == this.timeList[this.timeList.length-1]){
					this.$message({
						message: '已经是最后一天了',
						type: 'warning'
					});
				}else{
					this.thisTime = this.timeList[this.timeList.indexOf(this.thisTime) 1]
					this.setProgressWidth()
				}
			}
		}
	}
</script>
 
<style lang="less" scoped>
	.time {
		width: 100%;
		height: 100%;
		background: rgba(10, 34, 66, 0.65);
		box-shadow: inset 0px 1px 12px 0px rgba(75, 137, 255, 0.5);
		border-radius: 4px;
		border: 1px solid #57C8EE;
		display: flex;
		align-items: flex-end;
		position: relative;
	}
 
	.time_menu {
		width: 20%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		padding: 0 3%;
		box-sizing: border-box;
 
		img {
			width: 20px;
			height: 20px;
			cursor: pointer;
			transition-duration: 0.5s;
		}
	}
 
	.progress {
		height:100%;
		position: absolute;
		display: flex;
		align-items: flex-end;
		z-index: -1;
		transition-duration: 0.5s;
	}
 
	.triangle {
		width: 0px;
		height: 0px;
		border: 20px solid transparent;
		border-top-color: #00FFFF;
		// opacity: 1;
		position: absolute;
		left: -20px;
		top: 20px;
	}
	.keDuXian{
		width: 2px;
		background-color: #FFF;
		cursor: pointer;
		margin-right:25px;
	}
	.progressImg{
		width: 1.125rem;
		height: 1.125rem;
		position: absolute;
		z-index:9;
	}
</style>

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

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

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

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

<!-- 进度条-->
<div style="width: 50%;height: 4%;position: absolute;z-index: 999;bottom: 20%;left: 25%;">
   <timescale ref="timescale" @schedule="schedule"></timescale>
</div>
 
<!-- 引入组件-->
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实现时间轴内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

Vue如何实现简单的时间轴与时间进度条的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  3. vue使用动画实现滚动表格效果

    这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. 关于Vue 监控数组的问题

    这篇文章主要介绍了Vue 监控数组的示例,主要包括Vue 是如何追踪数据发生变化,Vue 如何更新数组以及为什么有些数组的数据变更不能被 Vue 监测到,对vue监控数组知识是面试比较常见的问题,感兴趣的朋友一起看看吧

  5. Vue子组件props从父组件接收数据并存入data

    这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. Vue h函数的使用详解

    本文主要介绍了Vue h函数的使用详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. VUE响应式原理的实现详解

    这篇文章主要为大家详细介绍了VUE响应式原理的实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

  8. vue+Element ui实现照片墙效果

    这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. vue+elemet实现表格手动合并行列

    这篇文章主要为大家详细介绍了vue+elemet实现表格手动合并行列,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. iview+vue实现导入EXCEL预览功能

    这篇文章主要为大家详细介绍了iview+vue实现导入EXCEL预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部