Merge pull request airyland#130 from graysheeep/master

timeline组件

src/components/timeline/index.js

@@ -0,0 +1,7 @@
+import Timeline from './timeline'
+import TimelineItem from './timeline-item'
+
+module.exports = {
+  Timeline,
+  TimelineItem
+}

src/components/timeline/timeline-item.vue

@@ -0,0 +1,90 @@
+<template>
+	<li class="timeline-item">
+		<div :class=" {'timeline-item-head': !isFirst,'timeline-item-head-first': isFirst }" :style="headStyle">
+			<icon v-show="isFirst" type="success_no_circle" class="timeline-item-checked"></icon>
+		</div>
+		<div class="timeline-item-tail" :style="tailStyle"></div>
+		<div class="timeline-item-content">
+			<slot></slot>
+		</div>
+	</li>
+</template>
+
+<style lang="less">
+
+	@timeline: ~"timeline";
+
+	.@{timeline} {
+		&-item {
+			position:relative;
+		}
+
+		&-item-content {
+			padding:0 0 1.5rem 1.2rem;
+		}
+
+		&-item-head, &-item-head-first {
+			position:absolute;
+			content:'';
+			z-index:99;
+			border-radius:99px;
+		}
+
+		&-item-head {
+			width:10px;
+			height:10px;
+			left:1px;top:4px;
+		}
+
+		&-item-head-first {
+			width:20px;
+			height:20px;
+			left:-4px;top:5px;
+		}
+
+		&-item-tail {
+			position:absolute;
+			content:'';
+			height:100%;
+			width:2px;
+			left:5px;top:5px;
+		}
+
+		&-item-checked {
+			width: 100%;
+			position: absolute;
+			left: 0;
+			top: 45%;
+			transform: translateY(-50%);
+
+			&::before {
+				font-size: 12px;
+				width: 20px;
+				color: #FFF;
+			}
+		}
+	}
+
+</style>
+
+<script>
+import Icon from '../icon'
+
+export default {
+  data () {
+    return {
+      isLast: true,
+      isFirst: true,
+      headStyle: { backgroundColor: this.$parent.color }
+    }
+  },
+  components: {
+    Icon
+  },
+  computed: {
+    tailStyle () {
+      return this.isLast ? { display: 'none', backgroundColor: this.$parent.color } : { display: 'block', backgroundColor: this.$parent.color }
+    }
+  }
+}
+</script>

src/components/timeline/timeline.vue

@@ -0,0 +1,45 @@
+<template>
+	<div class="vux-timeline">
+		<ul>
+			<slot></slot>
+		</ul>
+	</div>
+</template>
+
+<style lang="less">
+	.vux-timeline {
+		padding:1rem;
+	}
+
+	li {
+		list-style: none;
+	}
+</style>
+
+<script>
+import TimelineItem from './timeline-item'
+
+export default {
+  props: {
+    color: {
+      type: String,
+      default: '#04BE02'
+    }
+  },
+  components: {
+    TimelineItem
+  },
+  ready () {
+    this.setChildProps()
+  },
+  methods: {
+    setChildProps () {
+      const len = this.$children.length
+      this.$children.forEach((child, index) => {
+        child.isLast = index === len - 1
+        child.isFirst = index === 0
+      })
+    }
+  }
+}
+</script>

src/demos/Timeline.vue

@@ -0,0 +1,50 @@
+<template>
+	<div class="timeline-demo">
+		<timeline>
+			<timeline-item>
+				<h4 class="recent">【广东】 广州市 已发出</h4>
+				<p class="recent">2016-04-17 12:00:00</p>
+			</timeline-item>
+			<timeline-item>
+				<h4> 申通快递员 广东广州 收件员 xxx 已揽件</h4>
+				<p>2016-04-16 10:23:00</p>
+			</timeline-item>
+			<timeline-item>
+				<h4> 商家正在通知快递公司揽件</h4>
+				<p>2016-04-15 9:00:00</p>
+			</timeline-item>
+		</timeline>
+	</div>
+</template>
+
+<style lang="less">
+	.timeline-demo {
+
+		p {
+			color: #888;
+			font-size: 0.8rem;
+		}
+
+		h4 {
+			color: #666;
+			font-weight: normal;
+		}
+
+		.recent {
+			color: #008DBC;
+		}
+
+	}
+</style>
+
+<script>
+import { Timeline, TimelineItem } from '../components/timeline'
+
+export default {
+  components: {
+    Timeline,
+    TimelineItem
+  }
+}
+</script>
+