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&#