[improvement] TreeSelect: add height prop (#1905)

packages/tree-select/demo/index.vue

@@ -106,7 +106,6 @@ export default {
       this.mainActiveIndex = index;
     },
     onItemClick(data) {
-      console.log(data);
       this.activeId = data.id;
     }
   }

packages/tree-select/en-US.md

@@ -50,10 +50,12 @@ export default {
 | Attribute | Description | Type | Default |
 |-----------|-----------|-----------|-------------|
 | items | Required datasets for the component, see Data Structure for detail. | `Array` | `[]` |
+| height | Height (px) | `Number` | `300` |
 | main-Active-index | The index of selected parent node | `Number` | `0` |
 | active-id | Id of selected item | `String | Number` | `0` |
 
 #### Event
+
 | Event | Description | Arguments |
 |-----------|-----------|-----------|
 | navclick | triggered when parent node is selected |  index: index of selected parent |

packages/tree-select/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="b()" :style="{ height: mainHeight + 'px' }">
+  <div :class="b()" :style="{ height: height + 'px' }">
     <div :class="b('nav')">
       <div
         v-for="(item, index) in items"
@@ -9,13 +9,14 @@
         {{ item.text }}
       </div>
     </div>
-    <div :class="b('content')" :style="{ height: itemHeight + 'px' }">
+    <div :class="b('content')">
       <div
         v-for="item in subItems"
         :key="item.id"
         class="van-ellipsis"
         :class="b('item', { active: activeId === item.id })"
-        @click="onItemSelect(item)">
+        @click="onItemSelect(item)"
+      >
         {{ item.text }}
         <icon
           v-if="activeId === item.id"
@@ -46,7 +47,7 @@ export default create({
       type: [Number, String],
       default: 0
     },
-    maxHeight: {
+    height: {
       type: Number,
       default: 300
     }
@@ -56,19 +57,12 @@ export default create({
     subItems() {
       const selectedItem = this.items[this.mainActiveIndex] || {};
       return selectedItem.children || [];
-    },
-    mainHeight() {
-      const maxHeight = Math.max(this.items.length * 44, this.subItems.length * 44);
-      return Math.min(maxHeight, this.maxHeight);
-    },
-    itemHeight() {
-      return Math.min(this.subItems.length * 44, this.maxHeight);
     }
   },
 
   methods: {
     onItemSelect(data) {
-      this.$emit('itemclick', { ...data });
+      this.$emit('itemclick', data);
     }
   }
 });

packages/tree-select/test/__snapshots__/demo.spec.js.snap

@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
           江苏
         </div>
       </div>
-      <div class="van-tree-select__content" style="height:300px;">
+      <div class="van-tree-select__content">
         <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
           杭州
           <i class="van-icon van-icon-success van-tree-select__selected" style="color:undefined;font-size:undefined;">

packages/tree-select/test/__snapshots__/index.spec.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`empty list 1`] = `
-<div class="van-tree-select" style="height: 0px;">
+<div class="van-tree-select" style="height: 300px;">
   <div class="van-tree-select__nav"></div>
-  <div class="van-tree-select__content" style="height: 0px;"></div>
+  <div class="van-tree-select__content"></div>
 </div>
 `;

packages/tree-select/zh-CN.md

@@ -50,7 +50,8 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| items | 分类显示所需的数据，具体数据结构可看 数据结构 | `Array` | `[]` |
+| items | 分类显示所需的数据，结构参见下方 | `Array` | `[]` |
+| height | 高度，单位为 px | `Number` | `300` |
 | main-active-index | 左侧导航高亮的索引 | `Number` | `0` |
 | active-id | 右侧选择项，高亮的数据id | `String | Number` | `0` |
 

packages/vant-css/src/tree-select.css

@@ -5,7 +5,7 @@
   position: relative;
 
   &__nav {
-    width: 143px;
+    width: 35%;
     position: absolute;
     left: 0;
     top: 0;
@@ -20,14 +20,20 @@
     padding: 0 15px;
     background-color: $white;
 
+    &:active,
     &--active {
       background-color: $background-color;
     }
+
+    &--active {
+      font-weight: 500;
+    }
   }
 
   &__content {
+    height: 100%;
     padding: 0 15px;
-    margin-left: 143px;
+    margin-left: 35%;
     overflow: scroll;
     -webkit-overflow-scrolling: touch;
   }
@@ -38,8 +44,9 @@
     padding-left: 5px;
     padding-right: 18px;
 
+    &:active,
     &--active {
-      color: $button-danger-background-color;
+      color: $red;
     }
   }