046_Timeline时间线

1. Timeline时间线

1.1. Timeline时间线可视化地呈现时间流信息。

1.2. Timeline Attributes

参数	说明	类型	可选值	默认值
reverse	指定节点排序方向, 默认为正序	boolean	无	false

1.3. Timeline-item Attributes

参数	说明	类型	可选值	默认值
timestamp	时间戳	string	无	无
hide-timestamp	是否隐藏时间戳	boolean	无	false
placement	时间戳位置	string	top / bottom	bottom
type	节点类型	string	primary / success / warning / danger / info	无
color	节点颜色	string	hsl / hsv / hex / rgb	无
size	节点尺寸	string	normal / large	normal
icon	节点图标	string	无	无

1.4. Timeline-Item Slot

name	说明
—	Timeline-Item的内容
dot	自定义节点

2. Timeline时间线例子

2.1. 使用脚手架新建一个名为element-ui-timeline折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Timeline from '../components/Timeline.vue'
import MyselfTimeline from '../components/MyselfTimeline.vue'
import TimestampTimeline from '../components/TimestampTimeline.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Timeline' },{ path: '/Timeline', component: Timeline },{ path: '/MyselfTimeline', component: MyselfTimeline },{ path: '/TimestampTimeline', component: TimestampTimeline }
]const router = new VueRouter({routes
})export default router

2.3. 在components下创建Timeline.vue

<template><div><h1>基础用法</h1><h4>Timeline可拆分成多个按照时间戳正序或倒序排列的activity, 时间戳是其区分于其他控件的重要特征, 使⽤时注意与Steps步骤条等区分。</h4><div>排序:<el-radio-group v-model="reverse"><el-radio :label="true">倒序</el-radio><el-radio :label="false">正序</el-radio></el-radio-group></div><el-timeline :reverse="reverse"><el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">{{activity.content}}</el-timeline-item></el-timeline></div>
</template><script>
export default {data () {return {reverse: true,activities: [{content: '活动按期开始',timestamp: '2018-04-15'}, {content: '通过审核',timestamp: '2018-04-13'}, {content: '创建成功',timestamp: '2018-04-11'}]}}
}
</script>

2.4. 在components下创建MyselfTimeline.vue

<template><div><h1>⾃定义节点样式</h1><h4>可根据实际场景⾃定义节点尺⼨、颜⾊或直接使⽤图标。</h4><el-timeline><el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp">{{activity.content}}</el-timeline-item></el-timeline></div>
</template><script>
export default {data () {return {activities: [{content: '支持使用图标',timestamp: '2018-04-12 20:46',size: 'large',type: 'primary',icon: 'el-icon-more'}, {content: '支持自定义颜色',timestamp: '2018-04-03 20:46',color: '#0bbd87'}, {content: '支持自定义尺寸',timestamp: '2018-04-03 20:46',size: 'large'}, {content: '默认样式的节点',timestamp: '2018-04-03 20:46'}]}}
}
</script>

2.5. 在components下创建TimestampTimeline.vue

<template><div><h1>时间戳</h1><h4>当内容在垂直⽅向上过⾼时, 可将时间戳置于内容之上。</h4><el-timeline><el-timeline-item timestamp="2018/4/12" placement="top"><el-card><h4>更新 Github 模板</h4><p>王小虎 提交于 2018/4/12 20:46</p></el-card></el-timeline-item><el-timeline-item timestamp="2018/4/3" placement="top"><el-card><h4>更新 Github 模板</h4><p>王小虎 提交于 2018/4/3 20:46</p></el-card></el-timeline-item><el-timeline-item timestamp="2018/4/2" placement="top"><el-card><h4>更新 Github 模板</h4><p>王小虎 提交于 2018/4/2 20:46</p></el-card></el-timeline-item></el-timeline></div>
</template>

2.6. 运行项目, 访问http://localhost:8080/#/Timeline

2.7. 运行项目, 访问http://localhost:8080/#/MyselfTimeline

2.8. 运行项目, 访问http://localhost:8080/#/TimestampTimeline

046_Timeline时间线相关推荐

腾讯微博API时间线相关接口返回的微博信息中head值使用问题
腾讯微博API时间线相关接口返回的微博信息中head值表示作者头像url,这个链接直接访问并不能使用,需要再附加一个参数指定图片的大小(100.50),比如:[head]/100.
介绍三种绘制时间线图的方法
作者 |周萝卜来源 |萝卜大杂烩今天我们再来分享几种不同的制作方法,大家可以自行比较下各种方法的优劣. Matplotlib 制作 Matplotlib 作为 Python 家族最为重要的可视化工 ...
R语言ggplot2可视化：使用ggplot2绘制按时间顺序排列的时间线图（chronological timeline plot）
R语言ggplot2可视化:使用ggplot2绘制按时间顺序排列的时间线图(chronological timeline plot) 目录 R语言ggplot
微软桌面5.0新增时间线功能
2019独角兽企业重金招聘Python工程师标准>>> 晨,微软召开发布会,正式更新Surface Pro 6 .Surface Laptop 2 以及 Surface Studio ...
SQL Server 2012笔记分享-48：备份时间线
备份时间线是SQL server 2012数据库恢复顾问页面中的一项重要新功能,可以让我们更方便的基于备份时间点进行数据库的恢复. 在SQL server 2012的还原数据库界面,可以找到时间线,如 ...
大佬教你Android如何实现时间线效果
背景这天下班前,老板找到小庄:有个页面要优化,小需求,你跟进一下. 小庄:好的老板! 他看了看时间,忐忑地翻出原型,看到了这样一个页面: 思索片刻后,小庄熟练地打开了某搜索引擎,没有找到合适的轮子, ...
mysql版本时间_【MySQL】MySQL版本时间线和MySQL各版本的区别
MySQL各版本的区别 https://yq.aliyun.com/articles/607474 http://blog.sina.com.cn/s/blog_62b37bfe0101he5t.ht ...
RecyclerView列表控件漂亮时间线实现
时间都去哪了:时间你走慢一点吧很多软件中都有时间线的东西,比如天气,计划,旅游等时间线最多了:具体实现方式很多,在本篇文章中讲解一种自定义View封装的方式实现时间线效果,PS:这也是面试中也时常会 ...
linux 相册管理,图片管理（时间线、相册管理）- 深度看图 -Deepin深度系统用户手册...
图片管理在图片管理界面,您可以通过时间线和相册来管理您的图片. 时间线管理时间线中的图片按照日期划分,将同一天的图片显示在一起,不同日期的图片分栏排列,最新的日期在最上方. 预览图缩放通过拖动界 ...

046_Timeline时间线

046_Timeline时间线相关推荐

最新文章

热门文章