chenhaodong / mew-iview

Commit 6c9e028234a6b57fb519404387ad5dc63ccd0760

Authored by huixisheng
1 parent bd596e7a

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 @6c9e028
1 1 <template>
2 2 <li :class="itemClasses">
3 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 5 <div :class="contentClasses">
6 6 <slot></slot>
7 7 </div>
... ... @@ -22,8 +22,8 @@
22 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 28 computed: {
29 29 itemClasses () {
... ...
src/index.js
  Show/Hide comments   View file @6c9e028
... ... @@ -36,7 +36,7 @@ import Steps from &#39;./components/steps&#39;;
36 36 // import Table from './components/table';
37 37 // import Tabs from './components/tabs';
38 38 // import Tag from './components/tag';
39   -// import Timeline from './components/timeline';
  39 +import Timeline from './components/timeline';
40 40 // import TimePicker from './components/time-picker';
41 41 // import Tooltip from './components/tooltip';
42 42 // import Transfer from './components/transfer';
... ... @@ -103,8 +103,8 @@ const iview = {
103 103 // Tabs: Tabs,
104 104 // TabPane: Tabs.Pane,
105 105 // Tag,
106   - // Timeline,
107   - // TimelineItem: Timeline.Item,
  106 + Timeline,
  107 + TimelineItem: Timeline.Item,
108 108 // TimePicker,
109 109 // Tooltip,
110 110 // Transfer,
... ...
test/app.vue
  Show/Hide comments   View file @6c9e028
... ... @@ -20,6 +20,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
20 20 <li><router-link to="/radio">Radio</router-link></li>
21 21 <li><router-link to="/checkbox">Checkbox</router-link></li>
22 22 <li><router-link to="/steps">Steps</router-link></li>
  23 + <li><router-link to="/timeline">Timeline</router-link></li>
23 24 </ul>
24 25 </nav>
25 26 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @6c9e028
... ... @@ -44,6 +44,10 @@ const router = new VueRouter({
44 44 {
45 45 path: '/steps',
46 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 @6c9e028
  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>
... ...