[new feature] TreeSelect: active-id support sync modifier (#4133)

src/tree-select/README.md

@@ -16,10 +16,8 @@ Vue.use(TreeSelect);
 ```html
 <van-tree-select
   :items="items"
-  :main-active-index="mainActiveIndex"
+  :active-id.sync="activeId"
-  :active-id="activeId"
+  :main-active-index.sync="mainActiveIndex"
-  @click-nav="onClickNav"
-  @click-item="onClickItem"
 />
 ```
 
@@ -29,16 +27,8 @@ export default {
     return {
       items,
       activeId: 1,
-      mainActiveIndex: 0,
+      mainActiveIndex: 0
     };
-  },
-  methods: {
-    onClickNav(index) {
-      this.mainActiveIndex = index;
-    },
-    onClickItem(data) {
-      this.activeId = data.id;
-    }
   }
 }
 ```
@@ -48,10 +38,8 @@ export default {
 ```html
 <van-tree-select
   :items="items"
-  :active-id="activeIds"
+  :active-id.sync="activeIds"
-  :main-active-index="mainActiveIndex"
+  :main-active-index.sync="mainActiveIndex"
-  @click-nav="onClickNav"
-  @click-item="onClickItem"
 />
 ```
 
@@ -60,24 +48,9 @@ export default {
   data() {
     return {
       items,
-      activeIds: 1,
+      activeIds: [1, 2],
-      mainActiveIndex: 0,
+      mainActiveIndex: 0
     };
-  },
-  methods: {
-    onClickNav(index) {
-      this.mainActiveIndex = index;
-    },
-    onClickItem(data) {
-      const { id } = data;
-      const { activeIds } = this;
-
-      if (activeIds.indexOf(id) !== -1) {
-        activeIds.splice(activeIds.indexOf(id), 1);
-      } else {
-        activeIds.push(id);
-      }
-    }
   }
 }
 ```

src/tree-select/README.zh-CN.md

@@ -13,12 +13,13 @@ Vue.use(TreeSelect);
 
 ### 单选模式
 
+`item`为分类显示所需的数据，数据格式见下方示例。`main-active-index`表示左侧高亮选项的索引，`active-id`表示右侧高亮选项的 id
+
 ```html
 <van-tree-select
   :items="items"
-  :active-id="activeId"
+  :active-id.sync="activeId"
   :main-active-index.sync="mainActiveIndex"
-  @click-item="onClickItem"
 />
 ```
 
@@ -30,23 +31,19 @@ export default {
       activeId: 1,
       mainActiveIndex: 0
     };
-  },
-  methods: {
-    onClickItem(data) {
-      this.activeId = data.id;
-    }
   }
 }
 ```
 
 ### 多选模式
 
+`active-id`为数组格式时，可以选中多个右侧选项
+
 ```html
 <van-tree-select
   :items="items"
-  :active-id="activeIds"
+  :active-id.sync="activeIds"
   :main-active-index.sync="mainActiveIndex"
-  @click-item="onClickItem"
 />
 ```
 
@@ -55,21 +52,9 @@ export default {
   data() {
     return {
       items,
-      activeIds: 1,
+      activeIds: [1, 2],
-      mainActiveIndex: 0,
+      mainActiveIndex: 0
     };
-  },
-  methods: {
-    onClickItem(data) {
-      const { id } = data;
-      const { activeIds } = this;
-
-      if (activeIds.indexOf(id) !== -1) {
-        activeIds.splice(activeIds.indexOf(id), 1);
-      } else {
-        activeIds.push(id);
-      }
-    }
   }
 }
 ```

src/tree-select/demo/index.vue

@@ -3,18 +3,16 @@
     <demo-block :title="$t('radioMode')">
       <van-tree-select
         :items="items"
+        :active-id.sync="activeId"
         :main-active-index.sync="mainActiveIndex"
-        :active-id="activeId"
-        @itemclick="onItemClick"
       />
     </demo-block>
 
     <demo-block :title="$t('multipleMode')">
       <van-tree-select
         :items="items"
+        :active-id.sync="activeIds"
         :main-active-index.sync="mainActiveIndex2"
-        :active-id="activeIds"
-        @itemclick="onItemClick2"
       />
     </demo-block>
   </demo-section>
@@ -30,40 +28,53 @@ export default {
       group4: '福建',
       radioMode: '单选模式',
       multipleMode: '多选模式',
-      city1: [{
+      city1: [
+        {
           text: '杭州',
           id: 1
-      }, {
+        },
+        {
           text: '温州',
           id: 2
-      }, {
+        },
+        {
           text: '宁波',
           id: 3,
           disabled: true
-      }, {
+        },
+        {
           text: '义乌',
           id: 4
-      }],
+        }
-      city2: [{
+      ],
+      city2: [
+        {
           text: '南京',
           id: 5
-      }, {
+        },
+        {
           text: '无锡',
           id: 6
-      }, {
+        },
+        {
           text: '徐州',
           id: 7
-      }, {
+        },
+        {
           text: '苏州',
           id: 8
-      }],
+        }
-      city3: [{
+      ],
+      city3: [
+        {
           text: '泉州',
           id: 9
-      }, {
+        },
+        {
           text: '厦门',
           id: 10
-      }]
+        }
+      ]
     },
     'en-US': {
       group1: 'All',
@@ -72,40 +83,53 @@ export default {
       group4: 'Group3',
       radioMode: 'Radio Mode',
       multipleMode: 'Multiple Mode',
-      city1: [{
+      city1: [
+        {
           text: 'Delaware',
           id: 1
-      }, {
+        },
+        {
           text: 'Florida',
           id: 2
-      }, {
+        },
+        {
           text: 'Georqia',
           id: 3,
           disabled: true
-      }, {
+        },
+        {
           text: 'Indiana',
           id: 4
-      }],
+        }
-      city2: [{
+      ],
+      city2: [
+        {
           text: 'Alabama',
           id: 5
-      }, {
+        },
+        {
           text: 'Kansas',
           id: 6
-      }, {
+        },
+        {
           text: 'Louisiana',
           id: 7
-      }, {
+        },
+        {
           text: 'Texas',
           id: 8
-      }],
+        }
-      city3: [{
+      ],
+      city3: [
+        {
           text: 'Alabama',
           id: 9
-      }, {
+        },
+        {
           text: 'Kansas',
           id: 10
-      }],
+        }
+      ]
     }
   },
 
@@ -120,37 +144,25 @@ export default {
 
   computed: {
     items() {
-      return [{
+      return [
+        {
           text: this.$t('group1'),
           children: [...this.$t('city1'), ...this.$t('city2')]
-      }, {
+        },
+        {
           text: this.$t('group2'),
           children: this.$t('city1')
-      }, {
+        },
+        {
           text: this.$t('group3'),
           children: this.$t('city2')
-      }, {
+        },
+        {
           text: this.$t('group4'),
           disabled: true,
           children: this.$t('city3')
-      }];
-    }
-  },
-
-  methods: {
-    onItemClick(data) {
-      this.activeId = data.id;
-    },
-
-    onItemClick2(data) {
-      const { id } = data;
-      const { activeIds } = this;
-
-      if (activeIds.indexOf(id) !== -1) {
-        activeIds.splice(activeIds.indexOf(id), 1);
-      } else {
-        activeIds.push(id);
         }
+      ];
     }
   }
 };

src/tree-select/index.tsx

@@ -18,10 +18,12 @@ export type TreeSelectChildren = {
   disabled?: boolean;
 };
 
+export type TreeSelectActiveId = number | string | (number | string)[];
+
 export type TreeSelectProps = {
   height: number | string;
   items: TreeSelectItem[];
-  activeId: number | string | (number | string)[];
+  activeId: TreeSelectActiveId;
   mainActiveIndex: number;
 };
 
@@ -41,7 +43,6 @@ function TreeSelect(
 
   const selectedItem: Partial<TreeSelectItem> = items[mainActiveIndex] || {};
   const subItems = selectedItem.children || [];
-
   const isMultiple = Array.isArray(activeId);
 
   function isActiveItem(id: number | string) {
@@ -91,7 +92,21 @@ function TreeSelect(
         ]}
         onClick={() => {
           if (!item.disabled) {
+            let newActiveId: TreeSelectActiveId = item.id;
+            if (isMultiple) {
+              newActiveId = (activeId as (string | number)[]).slice();
+
+              const index = newActiveId.indexOf(item.id);
+
+              if (index !== -1) {
+                newActiveId.splice(index, 1);
+              } else {
+                newActiveId.push(item.id);
+              }
+            }
+
             emit(ctx, 'click-item', item);
+            emit(ctx, 'update:active-id', newActiveId);
 
             // compatible for old usage, should be removed in next major version
             emit(ctx, 'itemclick', item);