diff --git a/example/pages/tree-select/index.wxml b/example/pages/tree-select/index.wxml index 35089402..c142ff04 100644 --- a/example/pages/tree-select/index.wxml +++ b/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> diff --git a/packages/tree-select/README.md b/packages/tree-select/README.md index 4e057ccc..c1d40b2f 100644 --- a/packages/tree-select/README.md +++ b/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` 整体为一个数组,数组内包含一系列描述分类的对象 diff --git a/packages/tree-select/index.wxml b/packages/tree-select/index.wxml index 9ada9149..baa6a221 100644 --- a/packages/tree-select/index.wxml +++ b/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"