[new feature] TreeSelect: 增加多选功能

example/pages/tree-select/index.js

@@ -23,8 +23,7 @@ Page({
         children: config.pro3
       }
     ],
-    mainActiveIndex: 0,
-    activeId: 1
+    mainActiveIndex: 0
   },
 
   onClickNav({ detail }) {
@@ -34,8 +33,23 @@ Page({
   },
 
   onClickItem({ detail }) {
+    // 多选
+    if (!this.data.activeId) this.data.activeId = [];
+
+    const idx = this.data.activeId.indexOf(detail.id);
+    if (idx > -1) {
+      this.data.activeId.splice(idx, 1);
+    } else {
+      this.data.activeId.push(detail.id);
+    }
+
+/*
+    // 单选
+    this.data.activeId = this.data.activeId === detail.id ? null : detail.id;
+*/
+
     this.setData({
-      activeId: detail.id
+      activeId: this.data.activeId
     });
   }
 });

packages/tree-select/README.md

@@ -15,7 +15,7 @@
 ### 基础用法
 
 可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。
-
+此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。
 ```html
 <van-tree-select
   items="{{ items }}"
@@ -39,8 +39,23 @@ Page({
   },
 
   onClickItem({ detail = {} }) {
+    // 多选
+    if (!this.data.activeId) this.data.activeId = [];
+
+    const idx = this.data.activeId.indexOf(detail.id);
+    if (idx > -1) {
+      this.data.activeId.splice(idx, 1);
+    } else {
+      this.data.activeId.push(detail.id);
+    }
+
+/*
+    // 单选
+    this.data.activeId = this.data.activeId === detail.id ? null : detail.id;
+*/
+
     this.setData({
-      activeId: detail.id
+      activeId: this.data.activeId
     });
   }
 });
@@ -52,7 +67,7 @@ Page({
 |-----------|-----------|-----------|-------------|-------------|
 | items | 分类显示所需的数据，具体数据结构可看 数据结构	 | Array | [] | |
 | main-active-index | 左侧导航高亮的索引	 | Number | 0 | |
-| active-id	 | 右侧选择项，高亮的数据id	 | String | Number	 | 0 | |
+| active-id	 | 右侧选择项，高亮的数据id	 | String / Number / Array	 | 0 | |
 
 ### Events
 

packages/tree-select/index.ts

@@ -20,7 +20,7 @@ VantComponent({
       value: 0
     },
     activeId: {
-      type: [Number, String]
+      type: [Number, String, Array]
     },
     maxHeight: {
       type: Number,

packages/tree-select/index.wxml

@@ -1,5 +1,23 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
+<wxs module="tsUtil">
+// 判断子项是否被选中
+function isArray (array) {
+  return array instanceof Array;
+}
+function isActive (activeList, itemId) {
+  if (typeof activeList === 'undefined' || activeList == null) return false;
+  if (isArray(activeList)) {
+    return activeList.indexOf(itemId) > -1;
+  }
+  else {
+    return activeList === itemId;
+  }
+}
+
+module.exports.isActive = isActive;
+</wxs>
+
 <view
   class="van-tree-select"
   style="height: {{ mainHeight }}px"
@@ -23,13 +41,13 @@
     <view
       wx:for="{{ subItems }}"
       wx:key="id"
-      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' : '' }}"
+      class="van-ellipsis van-hairline--bottom content-item-class {{ utils.bem('tree-select__item', { active: tsUtil.isActive(activeId, item.id), disabled: item.disabled }) }} {{ tsUtil.isActive(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 }}"
+        wx:if="{{ tsUtil.isActive(activeId, item.id) }}"
         name="checked"
         size="16px"
         class="van-tree-select__selected"