feat(TreeSelect): add content slot (#2006)

example/pages/tree-select/index.wxml

@@ -1,22 +1,35 @@
-<demo-block title="基础用法">
+<demo-block title="单选模式">
   <van-tree-select
+    content-item-class="content-item-class"
     items="{{ items }}"
     main-active-index="{{ mainActiveIndex }}"
     active-id="{{ activeId }}"
     bind:click-item="onClickItem"
     bind:click-nav="onClickNav"
-    content-item-class="content-item-class"
   ></van-tree-select>
 </demo-block>
 
-<demo-block title="多选">
+<demo-block title="多选模式">
   <van-tree-select
+    content-item-class="content-item-class"
+    max="2"
     items="{{ items }}"
     main-active-index="{{ mainActiveIndexMulti }}"
     active-id="{{ activeIdMulti }}"
     bind:click-item="onClickItemMulti"
     bind:click-nav="onClickNavMulti"
-    max="2"
-    content-item-class="content-item-class"
   ></van-tree-select>
 </demo-block>
+
+<demo-block title="自定义内容">
+  <van-tree-select
+    content-item-class="content-item-class"
+    items="{{ items }}"
+    main-active-index="{{ mainActiveIndexMulti }}"
+    active-id="{{ activeIdMulti }}"
+    bind:click-item="onClickItemMulti"
+    bind:click-nav="onClickNavMulti"
+  >
+    <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />
+  </van-tree-select>
+</demo-block>

packages/tree-select/README.md

@@ -12,7 +12,7 @@
 
 ## 代码演示
 
-### 基础用法
+### 单选模式
 
 可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。
 此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。
@@ -48,13 +48,14 @@ Page({
 });
 ```
 
-### 多选
+### 多选模式
 
 ```html
 <van-tree-select
   items="{{ items }}"
   main-active-index="{{ mainActiveIndex }}"
   active-id="{{ activeId }}"
+  max="{{ max }}"
   bind:click-nav="onClickNav"
   bind:click-item="onClickItem"
 />
@@ -64,7 +65,8 @@ Page({
 Page({
   data: {
     mainActiveIndex: 0,
-    activeId: []
+    activeId: [],
+    max: 2
   },
 
   onClickNav({ detail = {} }) {
@@ -88,6 +90,20 @@ Page({
 });
 ```
 
+### 自定义内容
+
+```html
+<van-tree-select
+  items="{{ items }}"
+  main-active-index="{{ mainActiveIndex }}"
+  active-id="{{ activeId }}"
+  bind:click-nav="onClickNav"
+  bind:click-item="onClickItem"
+>
+  <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />
+<van-tree-select/>
+```
+
 ## API
 
 ### Props
@@ -106,6 +122,12 @@ Page({
 | bind:click-nav | 左侧导航点击时，触发的事件 | event.detail.index：被点击的导航的索引 |
 | bind:click-item | 右侧选择项被点击时，会触发的事件 | event.detail: 该点击项的数据 |
 
+### Slots
+
+| 名称 | 说明 |
+|-----------|-----------|
+| content | 自定义右侧区域内容，如果存在 items，则插入在顶部 |
+
 ### items 数据结构
 
 `items` 整体为一个数组，数组内包含一系列描述分类的对象

packages/tree-select/index.wxml

@@ -21,6 +21,7 @@
     class="van-tree-select__content"
     style="height: {{ itemHeight }}px"
   >
+    <slot name="content" />
     <view
       wx:for="{{ subItems }}"
       wx:key="id"