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时间线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。