Vue时间轴

上面是时间轴的呈现效果。

有两种思路进行设计，第一种是时间线的长短跟时间点的位置跟数量都是动态生成的，但是我考虑到时间线的长短动态生成的话，时间点的位置可能不太好控制，尤其是最最后一个时间点跟时间线终点能否连接，加上屏幕大小的变化，还得控制整个时间轴的位置不动，着实有些头疼。然后采取了另外一种，将时间线的长度固定，时间点的数量动态生成，时间点的位置动态控制，这样还是蛮靠谱的，因为最后一个时间点是向右浮动的原因，最后的两个时间点的li层就不允许重合了，不然样式会错乱。

三种时间点的图片名称：

html代码：

css代码：

data代码：

data: {	
	timeLineDataList: [],//时间轴展示数据           
    reTime:false,//控制锁。加这个锁是因为选择日期的时候会弹出时间选择的组件，这样会使页面的DOM发生变化，会走Vue的updated方法。updated方法中存在着时间轴样式的控制，所以防止选择日期的时候时间轴样式控制代码的执行，加这个锁。
},

methods中调用加载时间轴代码：

load: function(){	
	//开锁
	vm.reTime = true;
	vm.initTimeLine();
},

加载时间轴：

//加载时间轴--A比今天小：蓝，B等于今天：绿，C大于今天：黄
initTimeLine: function(){				
	//清空时间数据数组
	if(vm.timeLineDataList.length>0){						
		vm.timeLineDataList.splice(0,vm.timeLineDataList.length);						
	}					
	var timeLineData = [];
	//获取今天日期的时间戳
	var todayTime = new Date(new Date().toLocaleDateString('zh-CN')).getTime();
	var record = form.getRecord();					
	if(null!=record.get("bmks")){
		var obj = {};						
		obj.label = "报名开始时间";
		obj.time = record.get("bmks").substring(0,10);
		if(todayTime>vm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTimevm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTimevm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTimevm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTimevm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTimevm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTimevm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTimevm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTimevm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTime0){
		//时间排序
		timeLineData.sort(vm.compareTime("time"));
		//时间去重
		var index = 0;
		var firstTime = {};
		firstTime.label = [];
		firstTime.label.push(timeLineData[0].label);
		firstTime.time = timeLineData[0].time;
		firstTime.color = timeLineData[0].color;
		vm.timeLineDataList.push(firstTime);
	 	for(var i=1;i

时间比较方法：

//时间比较方法
compareTime: function(time){
	return function(a,b){
		var time1 = vm.formatDate(a.time);
		var time2 = vm.formatDate(b.time);
		return time1-time2;
	}					
},

日期类型字符串转时间戳：

//将日期类型字符串 转为1970毫秒
formatDate: function(str){
	return new Date(str.replace(/-/g,'/')).getTime();
},

updated方法中时间轴样式的控制代码：

if(vm.reTime){
	if(vm.timeLineDataList.length>0){	
		//处理li的间距
		var timeLineLi = document.getElementsByClassName("timeLineli");						
		var days = parseInt((vm.formatDate(vm.timeLineDataList[vm.timeLineDataList.length-1].time)-vm.formatDate(vm.timeLineDataList[0].time))/(1000*60*60*24));
		var m = parseInt(900/days);	
		//控制位置																	
		for(var i=1;i0){
				realw = -50;
			}else{
				realw = f;
			}						
			timeLineLi[i].style.marginLeft = realw+"px";
		}						
		var hrlW = timeLineLi[timeLineLi.length-1].offsetLeft-timeLineLi[0].offsetLeft;
		var hr = document.getElementById("timeLineHr");
		hr.style.width = hrlW+"px";		
		//控制内容
		for(var i=0;i0){								
					for(var l=timeLineLi[i].children[2].children.length-1;l>=0;l--){
						timeLineLi[i].children[2].children[l].remove();
					}
				}
				var pTime = document.createElement("p");
				pTime.append(vm.timeLineDataList[i].time);
				pTime.style.marginTop = "0px";
				pTime.style.marginBottom = "0px";								
				timeLineLi[i].children[2].append(pTime);
				for(var j=0;j0){								
					for(var l=timeLineLi[i].children[0].children.length-1;l>=0;l--){
						timeLineLi[i].children[0].children[l].remove();
					}
				}								
				for(var j=0;j

总结：哎，还是让美工画个图简单。。。嘤嘤嘤.