From 6c9e028234a6b57fb519404387ad5dc63ccd0760 Mon Sep 17 00:00:00 2001
From: huixisheng <huixisheng@huixishengdeMacBook-Pro.local>
Date: Thu, 2 Mar 2017 09:06:39 +0800
Subject: [PATCH] Support timeline

---
 src/components/timeline/timeline-item.vue |  6 +++---
 src/index.js                              |  6 +++---
 test/app.vue                              |  1 +
 test/main.js                              |  4 ++++
 test/routers/timeline.vue                 | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 72 insertions(+), 6 deletions(-)
 create mode 100644 test/routers/timeline.vue

diff --git a/src/components/timeline/timeline-item.vue b/src/components/timeline/timeline-item.vue
index 9ec47a1..a66aaa1 100644
--- a/src/components/timeline/timeline-item.vue
+++ b/src/components/timeline/timeline-item.vue
@@ -1,7 +1,7 @@
 <template>
     <li :class="itemClasses">
         <div :class="tailClasses"></div>
-        <div :class="headClasses" :style="customColor" v-el:dot><slot name="dot"></slot></div>
+        <div :class="headClasses" :style="customColor" ref="dot"><slot name="dot"></slot></div>
         <div :class="contentClasses">
             <slot></slot>
         </div>
@@ -22,8 +22,8 @@
                 dot: false
             };
         },
-        ready () {
-            this.dot = this.$els.dot.innerHTML.length ? true : false;
+        mounted () {
+            this.dot = this.$refs.dot.innerHTML.length ? true : false;
         },
         computed: {
             itemClasses () {
diff --git a/src/index.js b/src/index.js
index e4e0ef4..50a23d1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -36,7 +36,7 @@ import Steps from './components/steps';
 // import Table from './components/table';
 // import Tabs from './components/tabs';
 // import Tag from './components/tag';
-// import Timeline from './components/timeline';
+import Timeline from './components/timeline';
 // import TimePicker from './components/time-picker';
 // import Tooltip from './components/tooltip';
 // import Transfer from './components/transfer';
@@ -103,8 +103,8 @@ const iview = {
     // Tabs: Tabs,
     // TabPane: Tabs.Pane,
     // Tag,
-    // Timeline,
-    // TimelineItem: Timeline.Item,
+    Timeline,
+    TimelineItem: Timeline.Item,
     // TimePicker,
     // Tooltip,
     // Transfer,
diff --git a/test/app.vue b/test/app.vue
index 8f20712..2b39f0d 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -20,6 +20,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/radio">Radio</router-link></li>
                 <li><router-link to="/checkbox">Checkbox</router-link></li>
                 <li><router-link to="/steps">Steps</router-link></li>
+                <li><router-link to="/timeline">Timeline</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index 57ec7a9..6a28d57 100644
--- a/test/main.js
+++ b/test/main.js
@@ -44,6 +44,10 @@ const router = new VueRouter({
         {
           path: '/steps',
           component: require('./routers/steps.vue')
+        },
+        {
+          path: '/timeline',
+          component: require('./routers/timeline.vue')
         }
     ]
 });
diff --git a/test/routers/timeline.vue b/test/routers/timeline.vue
new file mode 100644
index 0000000..598921e
--- /dev/null
+++ b/test/routers/timeline.vue
@@ -0,0 +1,61 @@
+<style scoped>
+    .time{
+        font-size: 14px;
+        font-weight: bold;
+    }
+    .content{
+        padding-left: 5px;
+    }
+</style>
+<template>
+<div>
+    <Timeline>
+        <Timeline-item>
+            <p class="time">1976年</p>
+            <p class="content">Apple I 问世</p>
+        </Timeline-item>
+        <Timeline-item>
+            <p class="time">1984年</p>
+            <p class="content">发布 Macintosh</p>
+        </Timeline-item>
+        <Timeline-item>
+            <p class="time">2007年</p>
+            <p class="content">发布 iPhone</p>
+        </Timeline-item>
+        <Timeline-item>
+            <p class="time">2010年</p>
+            <p class="content">发布 iPad</p>
+        </Timeline-item>
+        <Timeline-item>
+            <p class="time">2011年10月5日</p>
+            <p class="content">史蒂夫·乔布斯去世</p>
+        </Timeline-item>
+    </Timeline>
+    <Timeline>
+        <Timeline-item color="green">发布1.0版本</Timeline-item>
+        <Timeline-item color="green">发布2.0版本</Timeline-item>
+        <Timeline-item color="red">严重故障</Timeline-item>
+        <Timeline-item color="blue">发布3.0版本</Timeline-item>
+    </Timeline>
+    <Timeline pending>
+        <Timeline-item>发布1.0版本</Timeline-item>
+        <Timeline-item>发布2.0版本</Timeline-item>
+        <Timeline-item>发布3.0版本</Timeline-item>
+        <Timeline-item><a href="#">查看更多</a></Timeline-item>
+    </Timeline>
+    <Timeline>
+        <Timeline-item color="green">
+            <Icon type="trophy" slot="dot"></Icon>
+            <span>发布里程碑版本</span>
+        </Timeline-item>
+        <Timeline-item>发布1.0版本</Timeline-item>
+        <Timeline-item>发布2.0版本</Timeline-item>
+        <Timeline-item>发布3.0版本</Timeline-item>
+    </Timeline>
+</div>
+</template>
+<script>
+    export default {
+
+    }
+</script>
--
libgit2 0.21.4