Commit 6c9e028234a6b57fb519404387ad5dc63ccd0760
1 parent
bd596e7a
Support timeline
Showing
5 changed files
with
72 additions
and
6 deletions
Show diff stats
src/components/timeline/timeline-item.vue
| 1 | <template> | 1 | <template> |
| 2 | <li :class="itemClasses"> | 2 | <li :class="itemClasses"> |
| 3 | <div :class="tailClasses"></div> | 3 | <div :class="tailClasses"></div> |
| 4 | - <div :class="headClasses" :style="customColor" v-el:dot><slot name="dot"></slot></div> | 4 | + <div :class="headClasses" :style="customColor" ref="dot"><slot name="dot"></slot></div> |
| 5 | <div :class="contentClasses"> | 5 | <div :class="contentClasses"> |
| 6 | <slot></slot> | 6 | <slot></slot> |
| 7 | </div> | 7 | </div> |
| @@ -22,8 +22,8 @@ | @@ -22,8 +22,8 @@ | ||
| 22 | dot: false | 22 | dot: false |
| 23 | }; | 23 | }; |
| 24 | }, | 24 | }, |
| 25 | - ready () { | ||
| 26 | - this.dot = this.$els.dot.innerHTML.length ? true : false; | 25 | + mounted () { |
| 26 | + this.dot = this.$refs.dot.innerHTML.length ? true : false; | ||
| 27 | }, | 27 | }, |
| 28 | computed: { | 28 | computed: { |
| 29 | itemClasses () { | 29 | itemClasses () { |
src/index.js
| @@ -36,7 +36,7 @@ import Steps from './components/steps'; | @@ -36,7 +36,7 @@ import Steps from './components/steps'; | ||
| 36 | // import Table from './components/table'; | 36 | // import Table from './components/table'; |
| 37 | // import Tabs from './components/tabs'; | 37 | // import Tabs from './components/tabs'; |
| 38 | // import Tag from './components/tag'; | 38 | // import Tag from './components/tag'; |
| 39 | -// import Timeline from './components/timeline'; | 39 | +import Timeline from './components/timeline'; |
| 40 | // import TimePicker from './components/time-picker'; | 40 | // import TimePicker from './components/time-picker'; |
| 41 | // import Tooltip from './components/tooltip'; | 41 | // import Tooltip from './components/tooltip'; |
| 42 | // import Transfer from './components/transfer'; | 42 | // import Transfer from './components/transfer'; |
| @@ -103,8 +103,8 @@ const iview = { | @@ -103,8 +103,8 @@ const iview = { | ||
| 103 | // Tabs: Tabs, | 103 | // Tabs: Tabs, |
| 104 | // TabPane: Tabs.Pane, | 104 | // TabPane: Tabs.Pane, |
| 105 | // Tag, | 105 | // Tag, |
| 106 | - // Timeline, | ||
| 107 | - // TimelineItem: Timeline.Item, | 106 | + Timeline, |
| 107 | + TimelineItem: Timeline.Item, | ||
| 108 | // TimePicker, | 108 | // TimePicker, |
| 109 | // Tooltip, | 109 | // Tooltip, |
| 110 | // Transfer, | 110 | // Transfer, |
test/app.vue
| @@ -20,6 +20,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } | @@ -20,6 +20,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } | ||
| 20 | <li><router-link to="/radio">Radio</router-link></li> | 20 | <li><router-link to="/radio">Radio</router-link></li> |
| 21 | <li><router-link to="/checkbox">Checkbox</router-link></li> | 21 | <li><router-link to="/checkbox">Checkbox</router-link></li> |
| 22 | <li><router-link to="/steps">Steps</router-link></li> | 22 | <li><router-link to="/steps">Steps</router-link></li> |
| 23 | + <li><router-link to="/timeline">Timeline</router-link></li> | ||
| 23 | </ul> | 24 | </ul> |
| 24 | </nav> | 25 | </nav> |
| 25 | <router-view></router-view> | 26 | <router-view></router-view> |
test/main.js
| @@ -44,6 +44,10 @@ const router = new VueRouter({ | @@ -44,6 +44,10 @@ const router = new VueRouter({ | ||
| 44 | { | 44 | { |
| 45 | path: '/steps', | 45 | path: '/steps', |
| 46 | component: require('./routers/steps.vue') | 46 | component: require('./routers/steps.vue') |
| 47 | + }, | ||
| 48 | + { | ||
| 49 | + path: '/timeline', | ||
| 50 | + component: require('./routers/timeline.vue') | ||
| 47 | } | 51 | } |
| 48 | ] | 52 | ] |
| 49 | }); | 53 | }); |
| 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 | +<div> | ||
| 12 | + <Timeline> | ||
| 13 | + <Timeline-item> | ||
| 14 | + <p class="time">1976年</p> | ||
| 15 | + <p class="content">Apple I 问世</p> | ||
| 16 | + </Timeline-item> | ||
| 17 | + <Timeline-item> | ||
| 18 | + <p class="time">1984年</p> | ||
| 19 | + <p class="content">发布 Macintosh</p> | ||
| 20 | + </Timeline-item> | ||
| 21 | + <Timeline-item> | ||
| 22 | + <p class="time">2007年</p> | ||
| 23 | + <p class="content">发布 iPhone</p> | ||
| 24 | + </Timeline-item> | ||
| 25 | + <Timeline-item> | ||
| 26 | + <p class="time">2010年</p> | ||
| 27 | + <p class="content">发布 iPad</p> | ||
| 28 | + </Timeline-item> | ||
| 29 | + <Timeline-item> | ||
| 30 | + <p class="time">2011年10月5日</p> | ||
| 31 | + <p class="content">史蒂夫·乔布斯去世</p> | ||
| 32 | + </Timeline-item> | ||
| 33 | + </Timeline> | ||
| 34 | + <Timeline> | ||
| 35 | + <Timeline-item color="green">发布1.0版本</Timeline-item> | ||
| 36 | + <Timeline-item color="green">发布2.0版本</Timeline-item> | ||
| 37 | + <Timeline-item color="red">严重故障</Timeline-item> | ||
| 38 | + <Timeline-item color="blue">发布3.0版本</Timeline-item> | ||
| 39 | + </Timeline> | ||
| 40 | + <Timeline pending> | ||
| 41 | + <Timeline-item>发布1.0版本</Timeline-item> | ||
| 42 | + <Timeline-item>发布2.0版本</Timeline-item> | ||
| 43 | + <Timeline-item>发布3.0版本</Timeline-item> | ||
| 44 | + <Timeline-item><a href="#">查看更多</a></Timeline-item> | ||
| 45 | + </Timeline> | ||
| 46 | + <Timeline> | ||
| 47 | + <Timeline-item color="green"> | ||
| 48 | + <Icon type="trophy" slot="dot"></Icon> | ||
| 49 | + <span>发布里程碑版本</span> | ||
| 50 | + </Timeline-item> | ||
| 51 | + <Timeline-item>发布1.0版本</Timeline-item> | ||
| 52 | + <Timeline-item>发布2.0版本</Timeline-item> | ||
| 53 | + <Timeline-item>发布3.0版本</Timeline-item> | ||
| 54 | + </Timeline> | ||
| 55 | +</div> | ||
| 56 | +</template> | ||
| 57 | +<script> | ||
| 58 | + export default { | ||
| 59 | + | ||
| 60 | + } | ||
| 61 | +</script> |