init

init

components/timeline/index.js

@@ -0,0 +1,5 @@
+import Timeline from './timeline.vue';
+import TimelineItem from './timeline-item.vue';
+
+Timeline.Item = TimelineItem;
+export default Timeline;

components/timeline/timeline-item.vue

@@ -0,0 +1,67 @@
+<template>
+    <li :class="itemClasses">
+        <div :class="tailClasses"></div>
+        <div :class="headClasses" :style="customColor">
+            <slot name="dot"></slot>
+        </div>
+        <div :class="contentClasses">
+            <slot></slot>
+        </div>
+    </li>
+</template>
+<script>
+    const prefixCls = 'ivu-timeline';
+
+    export default {
+        props: {
+            color: {
+                type: String,
+                default: 'blue'
+            }
+        },
+        data () {
+            return {
+                dot: false
+            }
+        },
+        ready () {
+            this.dot = this.$children.length ? true : false;
+        },
+        computed: {
+            itemClasses () {
+                return `${prefixCls}-item`;
+            },
+            tailClasses () {
+                return `${prefixCls}-item-tail`;
+            },
+            headClasses () {
+                return [
+                    `${prefixCls}-item-head`,
+                    {
+                        [`${prefixCls}-item-head-custom`]: this.dot,
+                        [`${prefixCls}-item-head-${this.color}`]: this.headColorShow
+                    }
+                ]
+            },
+            headColorShow () {
+                return this.color == 'blue' || this.color == 'red' || this.color == 'green';
+            },
+            customColor () {
+                let style = {};
+                if (this.color) {
+                    if (!this.headColorShow) {
+                        style = {
+                            'color': this.color,
+                            'border-color': this.color
+                        }
+                    }
+                }
+
+                return style;
+            },
+            contentClasses () {
+                return `${prefixCls}-item-content`;
+            }
+        }
+    }
+</script>

components/timeline/timeline.vue

@@ -0,0 +1,27 @@
+<template>
+    <ul :class="classes">
+        <slot></slot>
+    </ul>
+</template>
+<script>
+    const prefixCls = 'ivu-timeline';
+
+    export default {
+        props: {
+            pending: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-pending`]: this.pending
+                    }
+                ]
+            }
+        }
+    }
+</script>