feat(Timeline): add slot icon

Closes #100
heyui · Apr 14, 2019 · e2fb31c · e2fb31c
1 parent fd931a0
commit e2fb31c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 2 deletions.
diff --git a/doc/components/component/view/timeline.vue b/doc/components/component/view/timeline.vue
@@ -67,5 +67,29 @@
         <td>-</td>
       </tr>
     </table>
+
+    <h3>TimelineItem Slot</h3>
+    <table class="table">
+      <tr>
+        <th>name</th>
+        <th>说明</th>
+        <th>参数</th>
+      </tr>
+      <tr>
+        <td>content</td>
+        <td>定义展示内容</td>
+        <td>无</td>
+      </tr>
+      <tr>
+        <td>time</td>
+        <td>定义时间展示</td>
+        <td>无</td>
+      </tr>
+      <tr>
+        <td>icon</td>
+        <td>定义图标展示</td>
+        <td>无</td>
+      </tr>
+    </table>
   </div>
 </template>
diff --git a/doc/components/demos/view/timeline2.vue b/doc/components/demos/view/timeline2.vue
@@ -7,6 +7,7 @@
       长春
     </TimelineItem>
     <TimelineItem>
+      <i class="h-icon-user primary-color" slot="icon"></i>
       <div slot="time">2012-12-23</div>
       <div slot="content">到达呼伦贝尔</div>
     </TimelineItem>

diff --git a/doc/components_en/component/view/timeline.vue b/doc/components_en/component/view/timeline.vue
@@ -66,5 +66,29 @@
         <td>-</td>
       </tr>
     </table>
+
+    <h3>TimelineItem Slot</h3>
+    <table class="table">
+      <tr>
+        <th>name</th>
+        <th>Description</th>
+        <th>Parameter</th>
+      </tr>
+      <tr>
+        <td>content</td>
+        <td>Define content show</td>
+        <td>none</td>
+      </tr>
+      <tr>
+        <td>time</td>
+        <td>Define time show</td>
+        <td>none</td>
+      </tr>
+      <tr>
+        <td>icon</td>
+        <td>Define icon show</td>
+        <td>none</td>
+      </tr>
+    </table>
   </div>
 </template>
diff --git a/doc/components_en/demos/view/timeline2.vue b/doc/components_en/demos/view/timeline2.vue
@@ -3,6 +3,7 @@
     <TimelineItem>Beijing</TimelineItem>
     <TimelineItem color="green">Changchun</TimelineItem>
     <TimelineItem>
+      <i class="h-icon-user primary-color" slot="icon"></i>
       <div slot="time">2012-12-23</div>
       <div slot="content">Arriving at Hulunbuir</div>
     </TimelineItem>

diff --git a/src/components/timeline/timeline-item.vue b/src/components/timeline/timeline-item.vue
@@ -4,7 +4,7 @@
       <slot name="time"></slot>
     </div>
     <div :class="prefix + '-item-content'">
-      <div :class="circleSC.classes" :style="circleSC.styles"><i :class="icon"></i></div>
+      <div :class="circleSC.classes" :style="circleSC.styles"><i :class="icon" v-if="!this.$slots.icon"></i><slot name="icon"></slot></div>
       <slot name="content"></slot>
       <slot></slot>
     </div>
@@ -27,7 +27,7 @@ export default {
     itemCls() {
       return {
         [`${prefix}-item`]: true,
-        'has-icon': !!this.icon,
+        'has-icon': !!this.icon || !!this.$slots.icon,
         [`${prefix}-item-${this.color}-color`]: !!this.color
       };
     },