Browse Source

Merge branch 'next' of https://github.com/yangxiaolu1993/nutui into next

yangxiaolu3 3 years ago
parent
commit
dfd4a8b56c

+ 11 - 0
src/packages/__VUE/elevator/demo.vue

@@ -24,6 +24,15 @@
         @click-index="clickIndex"
       ></nut-elevator>
     </div>
+    <h2>{{ translate('customContent') }}</h2>
+    <div class="elevator-wrapper">
+      <nut-elevator :index-list="temp" :height="260" @click-item="clickItem" @click-index="clickIndex">
+        <template v-slot:default="slotProps">
+          <nut-icon name="JD" size="12"></nut-icon>
+          <span :style="{ marginLeft: '15px' }">{{ slotProps.item.name }}</span>
+        </template>
+      </nut-elevator>
+    </div>
   </div>
 </template>
 
@@ -37,6 +46,7 @@ useTranslate({
     basic: '基本用法',
     customIndex: '自定义索引key',
     sticky: '索引吸顶',
+    customContent: '自定义内容',
     anhui: '安徽',
     beijing: '北京',
     guangxi: '广西',
@@ -82,6 +92,7 @@ useTranslate({
     basic: 'Basic Usage',
     customIndex: 'Custom index key',
     sticky: 'Index ceiling',
+    customContent: 'Custom content',
     anhui: 'AnHui',
     beijing: 'BeiJing',
     guangxi: 'GuangXi',

+ 89 - 0
src/packages/__VUE/elevator/doc.en-US.md

@@ -373,6 +373,89 @@ app.use(Elevator);
 
 :::
 
+### Custom Content
+
+:::demo
+
+``` html
+<template>
+  <nut-elevator :index-list="dataList" :height="260" @click-item="clickItem" @click-index="clickIndex">
+      <template v-slot:default="slotProps">
+        <nut-icon name='JD' size="12"></nut-icon>
+        <span :style="{marginLeft: '15px'}">{{ slotProps.item.name }}</span>
+      </template>
+  </nut-elevator>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        acceptKey: 'num',
+        dataList: [
+          {
+            title: 'A',
+            list: [
+              {
+                name: 'AnHui',
+                id: 1
+              }
+            ]
+          },
+          {
+            title: 'B',
+            list: [
+              {
+                name: 'BeiJing',
+                id: 2
+              }
+            ]
+          },
+          {
+            title: 'G',
+            list: [
+              {
+                name: 'GuangXi',
+                id: 3
+              },
+              {
+                name: 'GuangDong',
+                id: 4
+              }
+            ]
+          },
+          {
+            title: 'H',
+            list: [
+              {
+                name: 'HuNan',
+                id: 5
+              },
+              {
+                name: 'HuBei',
+                id: 6
+              }
+            ]
+          }
+        ]
+      });
+
+      const clickItem = (key: string, item: any) => {
+        console.log(key, JSON.stringify(item));
+      };
+
+      const clickIndex = (key: string) => {
+        console.log(key);
+      };
+
+      return { ...toRefs(state), clickItem, clickIndex };
+    }
+  };
+</script>
+```
+
+:::
+
 ## API
 
 ### Prop
@@ -386,6 +469,12 @@ app.use(Elevator);
 | space-height             | Up and down spacing of right anchor point              | Number  | `23` |
 | title-height             | Height of left index                                                     | Number  | `35` |
 
+### Slot
+
+| Attribute                   | Description                                                             |
+|------------------------|----------------------------------------------------------------|
+| default                 | Customize the contents of each data under the left index        |
+
 ### Event
 
 | Event  | Description     | Arguments    |

+ 90 - 0
src/packages/__VUE/elevator/doc.md

@@ -373,6 +373,89 @@ app.use(Elevator);
 
 :::
 
+### 自定义内容
+
+:::demo
+
+``` html
+<template>
+  <nut-elevator :index-list="dataList" :height="260" @click-item="clickItem" @click-index="clickIndex">
+      <template v-slot:default="slotProps">
+        <nut-icon name='JD' size="12"></nut-icon>
+        <span :style="{marginLeft: '15px'}">{{ slotProps.item.name }}</span>
+      </template>
+  </nut-elevator>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        acceptKey: 'num',
+        dataList: [
+          {
+            title: 'A',
+            list: [
+              {
+                name: '安徽',
+                id: 1
+              }
+            ]
+          },
+          {
+            title: 'B',
+            list: [
+              {
+                name: '北京',
+                id: 2
+              }
+            ]
+          },
+          {
+            title: 'G',
+            list: [
+              {
+                name: '广西',
+                id: 3
+              },
+              {
+                name: '广东',
+                id: 4
+              }
+            ]
+          },
+          {
+            title: 'H',
+            list: [
+              {
+                name: '湖南',
+                id: 5
+              },
+              {
+                name: '湖北',
+                id: 6
+              }
+            ]
+          }
+        ]
+      });
+
+      const clickItem = (key: string, item: any) => {
+        console.log(key, JSON.stringify(item));
+      };
+
+      const clickIndex = (key: string) => {
+        console.log(key);
+      };
+
+      return { ...toRefs(state), clickItem, clickIndex };
+    }
+  };
+</script>
+```
+
+:::
+
 ## API
 
 ### Prop
@@ -386,6 +469,13 @@ app.use(Elevator);
 | space-height             | 右侧锚点的上下间距                                                   | Number  | `23` |
 | title-height             | 左侧索引的高度                                                     | Number  | `35` |
 
+
+### Slot
+
+| 字段                   | 说明                                                             |
+|------------------------|----------------------------------------------------------------|
+| default                 | 自定义左侧索引下每条数据的内容                                     |
+
 ### Event
 
 | 名称  | 说明     | 回调参数    |

+ 4 - 2
src/packages/__VUE/elevator/index.taro.vue

@@ -25,8 +25,10 @@
           v-for="subitem in item.list"
           :key="subitem['id']"
           @click="handleClickItem(item[acceptKey], subitem)"
-          v-html="subitem.name"
-        ></view>
+        >
+          <span v-html="subitem.name" v-if="!$slots.default"></span>
+          <slot :item="subitem" v-else></slot>
+        </view>
       </view>
       <view class="nut-elevator__list__fixed" :style="fixedStyle" v-show="scrollY > 0" v-if="isSticky">
         <span class="fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>

+ 4 - 2
src/packages/__VUE/elevator/index.vue

@@ -11,8 +11,10 @@
           v-for="subitem in item.list"
           :key="subitem['id']"
           @click="handleClickItem(item[acceptKey], subitem)"
-          v-html="subitem.name"
-        ></view>
+        >
+          <span v-html="subitem.name" v-if="!$slots.default"></span>
+          <slot :item="subitem" v-else></slot>
+        </view>
       </view>
       <view class="nut-elevator__list__fixed" :style="fixedStyle" v-show="scrollY > 0" v-if="isSticky">
         <span class="fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>