vue timeLine 时间轴
需求:
纵坐标为日期 横坐标为 时间点 且 横坐标有分支(前提事件)
纵坐标是用elementUi里的事件轴实现。
实现:
> "timeLineTitle" >"timeLineItem">"finish timeLineStatus">已完成"timeLineItem">"being timeLineStatus">进行中"timeLineItem">"wating timeLineStatus">待开始"timeLineItem">"timeOut timeLineStatus">超时警告"margin-left: 100px; margin-top: 10px;" id="timeLineDate"> "(activity, index) in activities" :key="index" icon="el-icon-timer" type="primary" size="large" :timestamp="activity.timestamp" placement="top" > "display:flex;">"activity.timeLineList">
timeLine:
if="timeLineList.length<6"><div class="timeLineBranch" v-if="timeLineList[index].timeLineBranch && timeLineList[index].timeLineBranch.length>0" ><div v-for="(item,index) in timeLineList" :key="index" v-if="index>=0 && indexstyle="flex:1;display:flex;flex-direction:column;" > <div class="dot" @mouseover="changeActive(index)" :class="{active: index === timeIndex}" >if="timeLineList[index].timestamp">{{timeLineList[index].timestamp}} {{timeLineList[index].info}}<div class="itemBot_list" :style="{backgroundColor:(timeLineList[index].status =='finish' ? '#65bdaf' :(timeLineList[index].status =='being'?'#eabd60':(timeLineList[index].status =='wating'?'#e2e9f9':(timeLineList[index].status =='timeOut'?'#ce3820':''))))}" >{{timeLineList[index].info}}item v-for="(itemBranch,indexBranch) in timeLineList[index].timeLineBranch" :key="indexBranch" :timestamp="itemBranch.timestamp" > {{itemBranch.info}}
<div
class="dot"
@mouseover="changeActive(timeLineList.length-1)"
:class="{active: timeLineList.length-1 === timeIndex}"
>
{{timeLineList[timeLineList.length-1].timestamp}}
{{timeLineList[timeLineList.length-1].info}}
<div
class="itemBot_list"
:style="{backgroundColor:(timeLineList[timeLineList.length-1].status =='finish' ? '#65bdaf' :(timeLineList[timeLineList.length-1].status =='being'?'#eabd60':(timeLineList[timeLineList.length-1].status =='wating'?'#e2e9f9':(timeLineList[timeLineList.length-1].status =='timeOut'?'#ce3820':''))))}"
>{{timeLineList[timeLineList.length-1].info}}
{{itemBranch.info}}
else>
<div
v-for="(item,index) in timeLineList"
:key="index"
v-if="index >= point && index <= point_end"
style="flex:1;display:flex;flex-direction:column;"
>
<div
class="move-button el-icon-arrow-left"
v-bind:class="{active: left_button_active}"
:disabled="left_button_disabled"
@click="moveLeft()"
>
左
<div
class="dot"
@mouseover="changeActive(index)"
:class="{active: index === timeIndex}"
>
{{timeLineList[index].timestamp}}
{{timeLineList[index].info}}
<div
class="itemBot_list"
:style="{backgroundColor:(timeLineList[index].status =='finish' ? '#65bdaf' :(timeLineList[index].status =='being'?'#eabd60':(timeLineList[index].status =='wating'?'#e2e9f9':(timeLineList[index].status =='timeOut'?'#ce3820':''))))}"
>{{timeLineList[index].info}}
{{itemBranch.info}}
<div
class="move-button el-icon-arrow-right"
v-bind:class="{active: right_button_active}"
:disabled="right_button_disabled"
@click="moveRight()"
>
右
横坐标时间轴 借鉴原文git 地址:https://github.com/FareDream/timeLineCase