Timeline 时间轴

概述

对一系列信息进行时间排序时,垂直地展示。

代码示例

Timeline 时间轴 - 图1

基础用法

最简单定义一个时间轴的用法。

  1. <style scoped>
  2. .time{
  3. font-size: 14px;
  4. font-weight: bold;
  5. }
  6. .content{
  7. padding-left: 5px;
  8. }
  9. </style>
  10. <template>
  11. <Timeline>
  12. <TimelineItem>
  13. <p class="time">1976年</p>
  14. <p class="content">Apple I 问世</p>
  15. </TimelineItem>
  16. <TimelineItem>
  17. <p class="time">1984年</p>
  18. <p class="content">发布 Macintosh</p>
  19. </TimelineItem>
  20. <TimelineItem>
  21. <p class="time">2007年</p>
  22. <p class="content">发布 iPhone</p>
  23. </TimelineItem>
  24. <TimelineItem>
  25. <p class="time">2010年</p>
  26. <p class="content">发布 iPad</p>
  27. </TimelineItem>
  28. <TimelineItem>
  29. <p class="time">2011年10月5日</p>
  30. <p class="content">史蒂夫·乔布斯去世</p>
  31. </TimelineItem>
  32. </Timeline>
  33. </template>
  34. <script>
  35. export default {
  36. }
  37. </script>

Timeline 时间轴 - 图2

圆圈颜色

用各种颜色来标识不同状态,可以使用greenredblue或自定义的颜色,默认是 blue 。

  1. <template>
  2. <Timeline>
  3. <TimelineItem color="green">发布1.0版本</TimelineItem>
  4. <TimelineItem color="green">发布2.0版本</TimelineItem>
  5. <TimelineItem color="red">严重故障</TimelineItem>
  6. <TimelineItem color="blue">发布3.0版本</TimelineItem>
  7. </Timeline>
  8. </template>
  9. <script>
  10. export default {
  11. }
  12. </script>

Timeline 时间轴 - 图3

最后一个

通过添加pending属性来标记最后一个为幽灵节点,标识还未完成。

  1. <template>
  2. <Timeline pending>
  3. <TimelineItem>发布1.0版本</TimelineItem>
  4. <TimelineItem>发布2.0版本</TimelineItem>
  5. <TimelineItem>发布3.0版本</TimelineItem>
  6. <TimelineItem><a href="#">查看更多</a></TimelineItem>
  7. </Timeline>
  8. </template>
  9. <script>
  10. export default {
  11. }
  12. </script>

Timeline 时间轴 - 图4

自定义时间轴点

接受一个 slot 来自定义轴点的内容,比如一个图标。

<template>
    <Timeline>
        <TimelineItem color="green">
            <Icon type="ios-trophy" slot="dot"></Icon>
            <span>发布里程碑版本</span>
        </TimelineItem>
        <TimelineItem>发布1.0版本</TimelineItem>
        <TimelineItem>发布2.0版本</TimelineItem>
        <TimelineItem>发布3.0版本</TimelineItem>
    </Timeline>
</template>
<script>
    export default {

    }
</script>

API

Timeline props

属性 说明 类型 默认值
pending 指定是否最后一个节点为幽灵节点 Boolean false

TimelineItem props

属性 说明 类型 默认值
color 圆圈颜色,可选值为blueredgreen,或自定义色值 String blue

TimelineItem slot

名称 说明
dot 自定义时间轴点内容
基本内容