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 9ec47a15..a66aaa1c 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 e4e0ef40..50a23d10 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 8f207128..2b39f0da 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 57ec7a9d..6a28d57c 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 00000000..598921e1
--- /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>