chenhaodong / mew-iview

Commit 8135d166e1895ed396993cbe22679e95d3943b71

Authored by Aresn
Committed by GitHub
2 parents 112ed1fa 85b0f07e

Merge pull request #326 from huixisheng/feature-timeline 

Support Timeline
Showing 5 changed files with 72 additions and 6 deletions   Show diff stats
Inline Side-by-side
src/components/timeline/timeline-item.vue
  Show/Hide comments   View file @8135d16
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 () {
@@ -36,7 +36,7 @@ import Steps from &#39;./components/steps&#39;; @@ -36,7 +36,7 @@ import Steps from &#39;./components/steps&#39;;
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,
@@ -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>
@@ -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 });
test/routers/timeline.vue 0 → 100644
  Show/Hide comments   View file @8135d16
  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>