Feat index list slot (didi#211)

* [update] index-list-anchor support v-html * [update] index-list support pulldown and pullup slot * [update] add pulldown and pullup slot props * [update]{index-list.md} add descriptions about pulldown and pullup slot
zj0511 · May 28, 2018 · c79879e · c79879e
1 parent 564b0a3
commit c79879e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 3 deletions.
diff --git a/document/components/docs/en-US/index-list.md b/document/components/docs/en-US/index-list.md
@@ -245,6 +245,13 @@
 
 Each item of `items` array must be an object that must contains the `name` attribute which is used for displaying the content; For example:  `items`: `[{name: 'xx', ...}, ...]`
 
+### Slot
+
+| Name | Description | Scope Parameters |
+| - | - | - |
+| pulldown | located above the list and shown when pulling down refreshing | the detail is the same as Scroll component's pulldown slot scope parameters |
+| pullup | located below the list and shown when pulling up loading | the detail is the same as Scroll component's pullup slot scope parameters |
+
 ### Events
 
 | Event Name | Description | Parameters |

diff --git a/document/components/docs/zh-CN/index-list.md b/document/components/docs/zh-CN/index-list.md
@@ -245,6 +245,13 @@
 
 `items` 数组中的每一项必须是对象，且包含 `name` 属性用于显示内容；例如 `items`: `[{name: 'xx', ...}, ...]`
 
+### 插槽
+
+| 名字 | 说明 | 作用域参数 |
+| - | - | - |
+| pulldown<sup>1.9.0+</sup> | 位于列表上方，会在下拉刷新时显示，与 scroll 组件相同 | 具体参考 scroll 组件的 pulldown 插槽作用域参数介绍 |
+| pullup<sup>1.9.0+</sup> | 位于列表下方，会在上拉加载时显示，与 scroll 组件相同  | 具体参考 scroll 组件的 pullup 插槽作用域参数介绍 |
+
 ### 事件
 
 | 事件名 | 说明 | 参数 |

diff --git a/src/components/index-list/index-list-group.vue b/src/components/index-list/index-list-group.vue
@@ -1,6 +1,6 @@
 <template>
   <li class="cube-index-list-group">
-    <h2 class="cube-index-list-anchor">{{group.name}}</h2>
+    <h2 class="cube-index-list-anchor" v-html="group.name"></h2>
     <ul>
       <slot>
         <cube-index-list-item v-for="(item, index) in group.items" :key="index" :item="item" @select="selectItem"></cube-index-list-item>

diff --git a/src/components/index-list/index-list.vue b/src/components/index-list/index-list.vue
@@ -19,6 +19,17 @@
           </slot>
         </ul>
       </div>
+      <template slot="pullup" slot-scope="props">
+        <slot name="pullup" :pullUpLoad="props.pullUpLoad" :isPullUpLoad="props.isPullUpLoad"></slot>
+      </template>
+      <template slot="pulldown" slot-scope="props">
+        <slot name="pulldown"
+          :pullDownRefresh="props.pullDownRefresh"
+          :pullDownStyle="props.pullDownStyle"
+          :beforePullDown="props.beforePullDown"
+          :isPullingDown="props.isPullingDown"
+          :bubbleY="props.bubbleY"></slot>
+      </template>
     </cube-scroll>
     <div v-if="navbar" class="cube-index-list-nav" @touchstart="onShortcutTouchStart" @touchmove.stop.prevent="onShortcutTouchMove">
       <ul class="cube-index-list-nav-list">
@@ -33,8 +44,10 @@
         </li>
       </ul>
     </div>
-    <div class="cube-index-list-fixed cube-index-list-anchor" ref="fixed" v-show="fixedTitle">
-      {{ fixedTitle }}
+    <div ref="fixed"
+      v-show="fixedTitle"
+      v-html="fixedTitle"
+      class="cube-index-list-fixed cube-index-list-anchor">
     </div>
   </div>
 </template>