最近做VUE开发，要实现时间轴功能，先看效果图

这个空间的主要功能点是蓝色竖线的距离和竖线要随着文字的增多而自动变长，实现思路是竖线为右侧的 border-left
第一个原点为实心，这里循环的时候判断下即可。
下面附上布局

   <div v-for="(item,index) in items" :key="item.id"><span :class="{circleOne:index != 0,circle:index == 0}"></span><div:class="{rightsborderleft:index != itemsLength,rights:true}"style="display: inline-block;"><div class="right-content"><span class="content-date">{{item.yearMonthDay}}/{{item.week}}</span><span class="content-time">{{item.hourMinuteSecond}}</span><span class="content-status">{{item.stateName}}</span><span style="max-width:700px; vertical-align: top;">{{item.remark}}<div v-if="item.truckPlate != ''"><span>车牌号：{{item.truckPlate}}</span><span style="margin: 0 15px">司机：{{item.driverName}}</span><span>司机手机：{{item.driverTel}}</span></div></span></div><imgv-if="item.state == 1"@click="getItemData(item.logCode)"src="@/assets/img/actionBarModify.svg"><imgv-if="item.state == 1"@click="deleteItem(item.logCode)"src="@/assets/img/actionDelete.svg"></div></div>

VUE 开发一套自己的时间轴相关推荐

通过自定义组件学习Vue系列（二）【时间轴】（附源码）
需求: 用于升级日志的显示效果图: 实现原理: 主要区域分为两块,时间区和内容区,时间区是画一个圆点和显示一个时间,内容区左边一个竖线和文字显示然后做一下循环,将每个日期的数据显示出来布局采用f ...
Vue，swipper手写横向时间轴
在一次需求中,UI交互用是关于时间轴,手写代码如下: HTML代码: HTML: <div class="swiper-container" ...
2021年基于VUE开发的一套移动端APP小说听书AI男女多种支持云端存储书籍记录
2021年基于VUE开发的一套移动端APP小说前端架构主要采用: "axios": "^0.21.1", "better-scroll": ...
前端开发：自定义时间轴的使用
在前端开发过程中,业务需求经常也会涉及到关于时间进度方面,这种情况也是比较常见的需求,对于时间进度的相关需求常见的有:商城商品发货进度,行政需求的审批时间节点等业务场景.虽然Vue的组件里面也提供了对 ...
vue 时间刻度_vue时间轴风格式的图片展示
项目将近完结,在修正bug的同时,也对自己项目中代码进行回顾分析. 看回半年前写的东西,真是很多都感到陌生,所以趁着下午的空档时间总结下之前遇到的难点. 好的,先上图,目标效果先分析 1. 上下两层 ...
php中时间轴开发，即显示为“刚刚”、“5分钟前”、“昨天10:23”等
php中时间轴开发,即显示为"刚刚"."5分钟前"."昨天10:23"等其实这个没什么技术含量,当然就直接贴代码,不废话了(合肥旅游网), ...
vue使用iview Timeline 时间轴不显示问题
vue Timeline 时间轴不显示渲染的效果官网代码 <Timeline pending><TimelineItem>发布1.0版本</TimelineItem&g ...
分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
uniapp、vue实现时间轴和刻度尺显示相关行程
uniapp.vue实现时间轴和刻度尺显示相关行程 <template><view class="time-line"><block v-for=&q ...

VUE 开发一套自己的时间轴

最近做VUE开发，要实现时间轴功能，先看效果图

VUE 开发一套自己的时间轴相关推荐

最新文章

热门文章