Vue实现可移动水平时间轴

Vue实现可移动水平时间轴实现可移动水平时间轴

主要为大家详细介绍了Vue实现可移动水平时间轴，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可

以参考一下

本文实例为大家分享了Vue实现可移动水平时间轴的具体代码，供大家参考，具体内容如下

里程碑时间轴具体实现

效果图

编辑里程碑效果图

<template>

<div style="width: 70%;display: inline-block" align="center">

<div style="width: 20%;display: inline-block; font-size: 14px;">里程碑状态：</div>

<div style="width: 100px;display: inline-block; font-size: 14px; ">开始 <img class="node_picture" src="../../assets/images/timeLineA.png"></div>

<div style="width: 100px;display: inline-block; font-size: 14px;">超期 <img class="node_picture" src="../../assets/images/timeLineB.png"> </div>

<div style="width: 100px;display: inline-block; font-size: 14px;">关闭 <img class="node_picture" src="../../assets/images/timeLineC.png"> </div>

</div>

<div class="my_timeline_prev" @click="moveLeft">

<img src="../../assets/arrow_left_blue.png" class="my_timeline_node"/>

<!-- <div class="my_timeline_item_line" style="margin-top: -18px;"></div>-->

<!-- <div class="my_timeline_item_content" style="color: rgba(0,0,0,0);">上</div>-->