[new feature] TreeSelect: 更新样式、支持左侧禁用、增加外部样式类 (#1084)

example/pages/tree-select/config.js

@@ -27,5 +27,13 @@ export default {
   }, {
     text: '苏州',
     id: 8
+  }],
+  pro3Name: '福建',
+  pro3: [{
+    text: '泉州',
+    id: 9
+  }, {
+    text: '厦门',
+    id: 10
   }]
 };

example/pages/tree-select/index.js

@@ -17,6 +17,10 @@ Page({
       }, {
         text: config.pro2Name,
         children: config.pro2
+      }, {
+        text: config.pro3Name,
+        disabled: true,
+        children: config.pro3
       }
     ],
     mainActiveIndex: 0,

example/pages/tree-select/index.wxml

@@ -5,5 +5,6 @@
     active-id="{{ activeId }}"
     bind:click-item="onClickItem"
     bind:click-nav="onClickNav"
+    content-item-class="content-item-class"
   ></van-tree-select>
 </demo-block>

example/pages/tree-select/index.wxss

@@ -1 +1 @@
-/* pages/tree-select/index.wxss */
+/* pages/tree-select/index.wxss */

packages/tree-select/README.md

@@ -67,6 +67,8 @@ Page({
   {
     // 导航名称
     text: '所有城市',
+    // 禁用选项
+    disabled: false,
     // 该导航下所有的可选项
     children: [
       {
@@ -86,6 +88,17 @@ Page({
 ]
 ```
 
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| main-item-class | 左侧选项样式类 |
+| content-item-class | 右侧选项样式类 |
+| main-active-class | 左侧选项选中样式类 |
+| content-active-class | 右侧选项选中样式类 |
+| main-disabled-class | 左侧选项禁用样式类 |
+| content-disabled-class | 右侧选项禁用样式类 |
+
 ### 更新日志
 
 | 版本 | 类型 | 内容 |

packages/tree-select/index.json

@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "van-icon": "../icon/index"
+    "van-icon": "../icon/index",
+    "van-cell": "../cell/index"
   }
 }

packages/tree-select/index.less

@@ -1,46 +1,62 @@
 @import '../common/style/var.less';
 
 .van-tree-select {
-  user-select: none;
   position: relative;
-  font-size: 16px;
+  font-size: 14px;
+  user-select: none;
 
   &__nav {
-    width: 35%;
     position: absolute;
-    left: 0;
     top: 0;
     bottom: 0;
-    background-color: @white;
+    left: 0;
+    width: 35%;
+    min-width: 120px;
+    background-color: @background-color-light;
   }
 
   &__nitem {
+    position: relative;
+    padding: 0 9px 0 15px;
     line-height: 44px;
-    padding: 0 15px;
-    background-color: @white;
 
-    &: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%;
-    padding: 0 15px;
+    padding-left: 15px;
     margin-left: 35%;
+    background-color: @white;
     box-sizing: border-box;
   }
 
   &__item {
     position: relative;
+    font-weight: bold;
     line-height: 44px;
-    padding-left: 5px;
-    padding-right: 18px;
 
     &:active,
     &--active {
@@ -49,16 +65,17 @@
 
     &--disabled,
     &--disabled:active {
-      color: @gray;
+      color: @gray-dark;
     }
   }
 
   &__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.ts

@@ -3,6 +3,15 @@ import { VantComponent } from '../common/component';
 const ITEM_HEIGHT = 44;
 
 VantComponent({
+  classes: [
+    'main-item-class',
+    'content-item-class',
+    'main-active-class',
+    'content-active-class',
+    'main-disabled-class',
+    'content-disabled-class'
+  ],
+
   props: {
     items: Array,
     mainActiveIndex: {
@@ -10,8 +19,7 @@ VantComponent({
       value: 0
     },
     activeId: {
-      type: Number,
-      value: 0
+      type: [Number, String]
     },
     maxHeight: {
       type: Number,
@@ -51,7 +59,10 @@ VantComponent({
     // 当一个导航被点击时
     onClickNav(event: Weapp.Event) {
       const { index } = event.currentTarget.dataset;
-      this.$emit('click-nav', { index });
+      const item = this.data.items[index];
+      if (!item.disabled) {
+        this.$emit('click-nav', { index });
+      }
     },
 
     // 更新子项列表

packages/tree-select/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
   class="van-tree-select"
   style="height: {{ mainHeight }}px"
@@ -6,7 +8,7 @@
     <view
       wx:for="{{ items }}"
       wx:key="index"
-      class="van-tree-select__nitem van-ellipsis {{ mainActiveIndex === index ? 'van-tree-select__nitem--active' : '' }}"
+      class="van-ellipsis main-item-class {{ utils.bem('tree-select__nitem', { active: mainActiveIndex === index, disabled: item.disabled }) }} {{ mainActiveIndex === index ? 'main-active-class' : '' }} {{ item.disabled ? 'main-disabled-class' : '' }}"
       data-index="{{ index }}"
       bind:tap="onClickNav"
     >
@@ -21,14 +23,15 @@
     <view
       wx:for="{{ subItems }}"
       wx:key="item.id"
-      class="van-tree-select__item van-ellipsis {{ activeId === item.id ? 'van-tree-select__item--active' : '' }} {{ item.disabled ? 'van-tree-select__item--disabled' : '' }}"
+      class="van-ellipsis van-hairline--bottom content-item-class {{ utils.bem('tree-select__item', { active: activeId === item.id, disabled: item.disabled }) }} {{ activeId === item.id ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}"
       data-item="{{ item }}"
       bind:tap="onSelectItem"
     >
       {{ item.text }}
       <van-icon
         wx:if="{{ activeId === item.id }}"
-        name="success"
+        name="checked"
+        size="16px"
         class="van-tree-select__selected"
       />
     </view>

packages/wxs/memoize.wxs

@@ -31,8 +31,11 @@ function serializer(args) {
   if (args.length === 1 && isPrimitive(args[0])) {
     return args[0];
   }
-
-  return JSON.stringify(args.length === 1 ? args[0] : args);
+  var obj = {};
+  for (var i = 0; i < args.length; i++) {
+    obj['key' + i] = args[i];
+  }
+  return JSON.stringify(obj);
 }
 
 function memoize(fn) {
@@ -40,7 +43,6 @@ function memoize(fn) {
 
   return function() {
     var key = serializer(arguments);
-
     if (cache[key] === undefined) {
       cache[key] = call(fn, arguments);
     }