[new feature] TreeSelect: update style、support disable nav item (#2308)

packages/tree-select/demo/index.vue

@@ -19,6 +19,7 @@ export default {
       group1: '所有城市',
       group2: '浙江',
       group3: '江苏',
+      group4: '福建',
       city1: [{
         text: '杭州',
         id: 1
@@ -45,12 +46,20 @@ export default {
       }, {
         text: '苏州',
         id: 8
+      }],
+      city3: [{
+        text: '泉州',
+        id: 9
+      }, {
+        text: '厦门',
+        id: 10
       }]
     },
     'en-US': {
       group1: 'All',
       group2: 'Group1',
       group3: 'Group2',
+      group4: 'Group3',
       city1: [{
         text: 'Delaware',
         id: 1
@@ -77,7 +86,14 @@ export default {
       }, {
         text: 'Texas',
         id: 8
-      }]
+      }],
+      city3: [{
+        text: 'Alabama',
+        id: 9
+      }, {
+        text: 'Kansas',
+        id: 10
+      }],
     }
   },
 
@@ -99,6 +115,10 @@ export default {
       }, {
         text: this.$t('group3'),
         children: this.$t('city2')
+      }, {
+        text: this.$t('group4'),
+        disabled: true,
+        children: this.$t('city3')
       }];
     }
   },

packages/tree-select/index.less

@@ -2,6 +2,7 @@
 
 .van-tree-select {
   user-select: none;
+  font-size: 14px;
   position: relative;
 
   &__nav {
@@ -10,39 +11,57 @@
     left: 0;
     top: 0;
     bottom: 0;
+    min-width: 120px;
     overflow: scroll;
-    background-color: @white;
+    background-color: @background-color-light;
     -webkit-overflow-scrolling: touch;
   }
 
   &__nitem {
+    position: relative;
     line-height: 44px;
-    padding: 0 15px;
-    background-color: @white;
+    padding: 0 9px 0 15px;
 
-    &:active,
-    &--active {
-      background-color: @background-color;
+    &:active::after,
+    &--active::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 3.6px;
+      background-color: @red;
+      content: '';
     }
 
     &--active {
-      font-weight: 500;
+      font-weight: bold;
+      background-color: @white;
+    }
+
+    &--disabled {
+      color: @gray-dark;
+    }
+
+    &--disabled:active::after {
+      display: none;
     }
   }
 
   &__content {
+    width: 65%;
     height: 100%;
-    padding: 0 15px;
+    padding-left: 15px;
     margin-left: 35%;
     overflow: scroll;
     -webkit-overflow-scrolling: touch;
+    background-color: @white;
+    box-sizing: border-box;
   }
 
   &__item {
     position: relative;
+    font-weight: bold;
     line-height: 44px;
-    padding-left: 5px;
-    padding-right: 18px;
 
     &:active,
     &--active {
@@ -56,11 +75,12 @@
   }
 
   &__selected {
-    float: right;
     position: absolute;
-    right: 0;
     top: 0;
+    right: 15px;
     bottom: 0;
-    line-height: inherit;
+    height: 24px;
+    margin: auto 0;
+    line-height: 24px;
   }
 }

packages/tree-select/index.vue

@@ -7,8 +7,8 @@
       <div
         v-for="(item, index) in items"
         class="van-ellipsis"
-        :class="b('nitem', { active: mainActiveIndex === index })"
-        @click="$emit('navclick', index)"
+        :class="b('nitem', { active: mainActiveIndex === index, disabled: item.disabled })"
+        @click="onClickNav(item, index)"
       >
         {{ item.text }}
       </div>
@@ -27,7 +27,8 @@
         {{ item.text }}
         <icon
           v-if="activeId === item.id"
-          name="success"
+          name="checked"
+          size="16px"
           :class="b('selected')"
         />
       </div>
@@ -62,6 +63,12 @@ export default create({
   },
 
   methods: {
+    onClickNav(data, index) {
+      if (!data.disabled) {
+        this.$emit('navclick', index);
+      }
+    },
+
     onItemSelect(data) {
       if (!data.disabled) {
         this.$emit('itemclick', data);

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

@@ -14,11 +14,14 @@ exports[`renders demo correctly 1`] = `
         <div class="van-ellipsis van-tree-select__nitem">
           江苏
         </div>
+        <div class="van-ellipsis van-tree-select__nitem van-tree-select__nitem--disabled">
+          福建
+        </div>
       </div>
       <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;">
+          <i class="van-icon van-icon-checked van-tree-select__selected" style="color:undefined;font-size:16px;">
             <!---->
             <!----></i></div>
         <div class="van-ellipsis van-tree-select__item">