vue时间线

最近在写项目的时候需要一个时间线，但是不能是elementUI自带的那种竖着的↓，想要一个横着的，所以就自己写了一个，样式大概写了一下有点丑，哈哈~

自己写的那个样式大概长这样：（确实很丑！！）

<div  class="timeLineDiv"  v-if="timeLineDataList.length>0">	
      <ul class="timeLineUl">		
        <li class="timeLineli" v-for="(item,index) in timeLineDataList" :key="index">
          <div>{{item.name}}</div>
          <div class="timePic">
            <div :style="item.timeline1" ></div>
            <img src="./assets/timeline_icon.png" width="15px" height="15px"/>
            <!--这个地方我的途中的蓝色的圆使用的png图片，本来用div直接画的，但是发现形状会变就直接用图片了，还省事-->
            <!--如果你想每个时间线的圈的颜色不同，那么你需要做的事每次更换图片，或者如果你不嫌麻烦你也可以试试用div画-->
            <div :style="item.timeline1"></div>
          </div>
          <div>{{item.value}}</div>
        </li>								
      </ul>							 
    </div>

<script>
  export default {
    name: "app",
    data() {
      return {
        //时间轴展示数据  
        timeLineDataList: [
          {
            name:"策划",
            value:"2020-01-01",
          },
          {
            name:"设计",
            value:"2020-02-02",
          },
          {
            name:"开发",
            value:"2020-06-03",
          },
          {
            name:"验证",
            value:"2020-06-04",
          },
          {
            name:"验证2",
            value:"2020-10-05",
          }
        ],
        timeline1:{
          width: '100px',
          height:'1px',
          backgroundColor: 'black',
        },
      };
    },
    created(){
      this.lengthChange()
    },
    methods: {
    //介个地方，在lengthChange函数里面的for循环里面加的if判断是为了判断当前时间点是否是数据数组中的最后一个数据，
    //我用来计算线长度是根据时间和后一个时间的间距来计算的，自然最后一个是没有可比较的，所以判断出最后一个，让其与前一个作比较既可。
      lengthChange(){
        for(let i = 0;i<this.timeLineDataList.length;i++){
          if(i<this.timeLineDataList.length-1){
            let t1 = new Date(this.timeLineDataList[i+1].value)
            let t2 = new Date(this.timeLineDataList[i].value)
            let t3 = (t1 - t2) / (60*60*24*1000)
            let w = (t3>100 ? t3 : 40) + "px"
            this.timeLineDataList[i].timeline1 = 
            {
              width: w,
              height:'1px',//时间线的宽度
              backgroundColor: 'black',//可用于改变时间线的颜色
            }
          }else{
            let t1 = new Date(this.timeLineDataList[i].value)
            let t2 = new Date(this.timeLineDataList[i-1].value)
            let t3 = (t1 - t2) / (60*60*24*1000)
            let w = (t3>100 ? t3 : 40) + "px"
            this.timeLineDataList[i].timeline1 = 
            {
              width: w,
              height:'1px',
              backgroundColor: 'black',
            }
          }
        }
        // console.log(this.timeLineDataList);
      }
    },
    
  };
</script>

<style type="text/css">
	.timeLineDiv{
    background-color: antiquewhite;
		margin-left:1%;
		margin-top:10px;
		overflow-x:auto;
    width: 50%;
	}

	.timeLineUl{		
		display: flex;
    flex-wrap: nowrap;
		/* margin-top:-50px; */
		list-style:none;
		padding-left:20px;
	}
	.timeLineUl li{
		/* float:left; */
		/* width:100px; */
		text-align:center;
		/* font-weight:bold;  */
	}
  .timePic{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  /* .timeline1{
    width: 100px;
    height:1px;
    background-color: black;
  } */
	.timeColor{
    border-radius: 50%;
    width:20px;
    height: 10px;
    background-color: blue;
    margin: 0 auto;
  }
	
</style>

自己之前写的时候，没在网上找到完全符合自己的想法的时间线，所以自己就画了一个，然后在这记一下吧，如果哪位兄弟需要，就拿去用哈~~（ps：有不完美的地方也请不吝赐教）