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