Browse Source

upd(#691): add name props support html

suzigang 4 years ago
parent
commit
b3e051ab70

+ 3 - 3
src/packages/__VUE/elevator/doc.md

@@ -31,7 +31,7 @@ setup() {
           title: 'A',
           list: [
             {
-              name: '安徽',
+              name: '<span>安徽</span>',
               id: 1
             }
           ]
@@ -61,7 +61,7 @@ setup() {
     };
 
     return { ...toRefs(state), clickItem, clickIndex };
-  }
+}
 ```
 
 ### 自定义索引
@@ -78,7 +78,7 @@ setup() {
 |------------------------|----------------------------------------------------------------|---------|------|
 | height                 | 电梯区域的高度                                                    | Number、String  | `200px`
 | accept-key             | 索引 key 值                                                      | String  | `title` |
-| index-list             | 索引列表                                                         | Array(item需包含 id、name属性)  | `[{id: 0, name: ''}]` |
+| index-list             | 索引列表                                                         | Array(item需包含 id、name属性, name支持传入 html 结构)  | `[{id: 0, name: ''}]` |
 
 ### Event
 

+ 9 - 21
src/packages/__VUE/elevator/index.taro.vue

@@ -13,30 +13,20 @@
         :key="item[acceptKey]"
         :ref="setListGroup"
       >
-        <view class="nut-elevator__list__item__code">{{
-          item[acceptKey]
-        }}</view>
+        <view class="nut-elevator__list__item__code">{{ item[acceptKey] }}</view>
         <view
           class="nut-elevator__list__item__name"
           v-for="subitem in item.list"
           :key="subitem['id']"
           @click="handleClickItem(item[acceptKey], subitem)"
-          >{{ subitem.name }}</view
-        >
+          v-html="subitem.name"
+        ></view>
       </view>
     </scroll-view>
-    <view
-      class="nut-elevator__code--current"
-      v-show="scrollStart"
-      v-if="indexList.length"
-      >{{ indexList[currentIndex][acceptKey] }}</view
-    >
-    <view
-      class="nut-elevator__bars"
-      @touchstart="touchStart"
-      @touchmove.stop.prevent="touchMove"
-      @touchend="touchEnd"
-    >
+    <view class="nut-elevator__code--current" v-show="scrollStart" v-if="indexList.length">{{
+      indexList[currentIndex][acceptKey]
+    }}</view>
+    <view class="nut-elevator__bars" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd">
       <view class="nut-elevator__bars__inner">
         <view
           class="nut-elevator__bars__inner__item"
@@ -153,8 +143,7 @@ export default create({
         state.listHeight = state.storageListHeight.slice();
       }
       if (index < 0) index = 0;
-      if (index > state.listHeight.length - 2)
-        index = state.listHeight.length - 2;
+      if (index > state.listHeight.length - 2) index = state.listHeight.length - 2;
       state.currentIndex = index;
       state.scrollTop = state.listHeight[index];
     };
@@ -172,8 +161,7 @@ export default create({
     const touchMove = (e: TouchEvent) => {
       let firstTouch = e.touches[0];
       state.touchState.y2 = firstTouch.pageY;
-      let delta =
-        ((state.touchState.y2 - state.touchState.y1) / spaceHeight) | 0;
+      let delta = ((state.touchState.y2 - state.touchState.y1) / spaceHeight) | 0;
       state.currentIndex = state.anchorIndex + delta;
       scrollTo(state.currentIndex);
     };

+ 11 - 32
src/packages/__VUE/elevator/index.vue

@@ -1,40 +1,21 @@
 <template>
   <view :class="classes">
-    <view
-      class="nut-elevator__list"
-      ref="listview"
-      :style="{ height: isNaN(+height) ? height : `${height}px` }"
-    >
-      <view
-        class="nut-elevator__list__item"
-        v-for="item in indexList"
-        :key="item[acceptKey]"
-        :ref="setListGroup"
-      >
-        <view class="nut-elevator__list__item__code">{{
-          item[acceptKey]
-        }}</view>
+    <view class="nut-elevator__list" ref="listview" :style="{ height: isNaN(+height) ? height : `${height}px` }">
+      <view class="nut-elevator__list__item" v-for="item in indexList" :key="item[acceptKey]" :ref="setListGroup">
+        <view class="nut-elevator__list__item__code">{{ item[acceptKey] }}</view>
         <view
           class="nut-elevator__list__item__name"
           v-for="subitem in item.list"
           :key="subitem['id']"
           @click="handleClickItem(item[acceptKey], subitem)"
-          >{{ subitem.name }}</view
-        >
+          v-html="subitem.name"
+        ></view>
       </view>
     </view>
-    <view
-      class="nut-elevator__code--current"
-      v-show="scrollStart"
-      v-if="indexList.length"
-      >{{ indexList[currentIndex][acceptKey] }}</view
-    >
-    <view
-      class="nut-elevator__bars"
-      @touchstart="touchStart"
-      @touchmove.stop.prevent="touchMove"
-      @touchend="touchEnd"
-    >
+    <view class="nut-elevator__code--current" v-show="scrollStart" v-if="indexList.length">{{
+      indexList[currentIndex][acceptKey]
+    }}</view>
+    <view class="nut-elevator__bars" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd">
       <view class="nut-elevator__bars__inner">
         <view
           class="nut-elevator__bars__inner__item"
@@ -141,8 +122,7 @@ export default create({
         calculateHeight();
       }
       if (index < 0) index = 0;
-      if (index > state.listHeight.length - 2)
-        index = state.listHeight.length - 2;
+      if (index > state.listHeight.length - 2) index = state.listHeight.length - 2;
       state.currentIndex = index;
       listview.value.scrollTo(0, state.listHeight[index]);
     };
@@ -161,8 +141,7 @@ export default create({
     const touchMove = (e: TouchEvent) => {
       let firstTouch = e.touches[0];
       state.touchState.y2 = firstTouch.pageY;
-      let delta =
-        ((state.touchState.y2 - state.touchState.y1) / spaceHeight) | 0;
+      let delta = ((state.touchState.y2 - state.touchState.y1) / spaceHeight) | 0;
       state.currentIndex = state.anchorIndex + delta;
       scrollTo(state.currentIndex);
     };