Vue之時間軸組件

github地址：https://github.com/SunshineMibai/vue-timeline 

實現思路及步驟：

頁面分為四個部分

1、左側時間

2、中間圓點

3、右側內容

4、虛線部分

 

最外層div,relative布局,方便子元素計算尺寸

左側時間固定寬度，顯示時間（本demo:100px）,之后absolute絕對定位（left:0）

中間圓點absolute絕對定位,因為左側寬度已經定為100px,圓點left值只需要大於100px肯定就會顯示在時間右側（具體值可以根據需求修改）

最右側的內容展示區域同理也是ab定位，值大於左側時間left值+圓點時間left值就可以（具體值可以根據需求修改）

最后只剩下虛線部分就可以得出結論，虛線的left值 = 圓點距離左側時間-圓點寬度的一半

此時，虛線正好壓在圓點中間部分，調整一下圓點和虛線的z-index值，即可

 

HTML代碼：
<div class='time-line'>
	<div v-for='item in testList' class='time-line-div'>
		<p>{{item.time}}</p>
		<p ref='circular'></p>
		<p>{{item.text}}</p>
	</div>
	<div class='img-dotted' ref='dotted'></div>
</div>



JS代碼：
mounted() {
	this.$refs.dotted.style.left = this.$refs.circular[0].offsetLeft - 12 + 'px'
}

Css代碼：
.time h2{
	color:#FF6600;
	margin: 20px auto 30px auto;
}
.time-line{
	position: relative;
	width:300px;
	margin:0 auto;
}
.time-line-div{
	position:relative;
	min-height:85px;
}
.time-line-div>p:nth-child(1){
	position: absolute;
	left:0;
	width:100px;
}
.time-line-div>p:nth-child(2){
	position:absolute;
	left: 100px;
	width:15px;
	height:15px;
	top:10px;
	background:#5CB85C;
	border-radius: 50%;
	z-index: 10
}
.time-line-div>p:nth-child(3){
	position:absolute;
	left: 130px;
	padding: 10px;
	background: #317EF3;
	font-size:.8rem;
	color:#fff;
	border-radius: 10px;
}
.img-dotted{
	position:absolute;
	width:20px;
	height:100%;
	top:0;
	z-index: 1;
	background:url('/static/images/vue/dotted.png');
}
.time-line-detail>p{
	margin-left: 30px;
	margin-bottom: 10px;
}