blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-05-20 21:49:14 +08:00
Code Issues Projects Releases Wiki Activity

[bugfix] TreeSelect: fix error when type of activeId is string or number

Browse Source 
fix #1912
This commit is contained in:
rex 2019-08-27 15:38:52 +08:00 committed by GitHub
parent 55cf16ab6e
commit 3691cc409c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 106 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
example/pages/tree-select/index.js
View File

@ -3,16 +3,11 @@ import config from './config';
Page({
data: {
items: [
{
// 导航名称
items: [{
text: '所有城市',
// 该导航下所有的可选项
children: [...config.pro1, ...config.pro2]
}, {
// 导航名称
text: config.pro1Name,
// 该导航下所有的可选项
children: config.pro1
}, {
text: config.pro2Name,
@ -23,7 +18,10 @@ Page({
children: config.pro3
}
],
mainActiveIndex: 0
mainActiveIndex: 0,
activeId: 0,
mainActiveIndexMulti: 0,
activeIdMulti: []
},
onClickNav({ detail }) {
@ -33,23 +31,26 @@ Page({
},
onClickItem({ detail }) {
// 多选
if (!this.data.activeId) this.data.activeId = [];
const activeId = this.data.activeId === detail.id ? null : detail.id;
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 });
},
onClickNavMulti({ detail }) {
this.setData({
activeId: this.data.activeId
mainActiveIndexMulti: detail.index || 0
});
},
onClickItemMulti({ detail }) {
const { activeIdMulti } = this.data;
const idx = activeIdMulti.indexOf(detail.id);
if (idx > -1) {
activeIdMulti.splice(idx, 1);
} else {
activeIdMulti.push(detail.id);
}
this.setData({ activeIdMulti });
}
});

11
example/pages/tree-select/index.wxml
View File

@ -8,3 +8,14 @@
content-item-class="content-item-class"
></van-tree-select>
</demo-block>
<demo-block title="多选">
<van-tree-select
items="{{ items }}"
main-active-index="{{ mainActiveIndexMulti }}"
active-id="{{ activeIdMulti }}"
bind:click-item="onClickItemMulti"
bind:click-nav="onClickNavMulti"
content-item-class="content-item-class"
></van-tree-select>
</demo-block>

66
packages/tree-select/README.md
View File

@ -29,7 +29,8 @@
```javascript
Page({
data: {
// ...
mainActiveIndex: 0,
activeId: null
},
onClickNav({ detail = {} }) {
@ -39,35 +40,60 @@ Page({
},
onClickItem({ detail = {} }) {
// 多选
if (!this.data.activeId) this.data.activeId = [];
const activeId = this.data.activeId === detail.id ? null : detail.id;
const idx = this.data.activeId.indexOf(detail.id);
if (idx > -1) {
this.data.activeId.splice(idx, 1);
this.setData({ activeId });
}
});
```
### 多选
```html
<van-tree-select
items="{{ items }}"
main-active-index="{{ mainActiveIndex }}"
active-id="{{ activeId }}"
bind:click-nav="onClickNav"
bind:click-item="onClickItem"
/>
```
```javascript
Page({
data: {
mainActiveIndex: 0,
activeId: []
},
onClickNav({ detail = {} }) {
this.setData({
mainActiveIndex: detail.index || 0
});
},
onClickItem({ detail = {} }) {
const { activeId } = this.data;
const index = activeId.indexOf(detail.id);
if (index > -1) {
activeId.splice(index, 1);
} else {
this.data.activeId.push(detail.id);
activeId.push(detail.id);
}
/*
// 单选
this.data.activeId = this.data.activeId === detail.id ? null : detail.id;
*/
this.setData({
activeId: this.data.activeId
});
this.setData({ activeId });
}
});
```
### Props
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | |
| main-active-index | 左侧导航高亮的索引 | Number | 0 | |
| active-id | 右侧选择项，高亮的数据id | String / Number / Array | 0 | |
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | `Array` | [] |
| main-active-index | 左侧导航高亮的索引 | `Number` | 0 | |
| active-id | 右侧选择项，高亮的数据id | `String | Number | Array` | 0 |
### Events

23
packages/tree-select/index.wxml
View File

@ -1,22 +1,5 @@
<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>
<wxs src="./index.wxs" module="wxs" />
<view
class="van-tree-select"
@ -41,13 +24,13 @@ module.exports.isActive = isActive;
<view
wx:for="{{ subItems }}"
wx:key="id"
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' : '' }}"
class="van-ellipsis van-hairline--bottom content-item-class {{ utils.bem('tree-select__item', { active: wxs.isActive(activeId, item.id), disabled: item.disabled }) }} {{ wxs.isActive(activeId, item.id) ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}"
data-item="{{ item }}"
bind:tap="onSelectItem"
>
{{ item.text }}
<van-icon
wx:if="{{ tsUtil.isActive(activeId, item.id) }}"
wx:if="{{ wxs.isActive(activeId, item.id) }}"
name="checked"
size="16px"
class="van-tree-select__selected"

12
packages/tree-select/index.wxs Normal file
View File

@ -0,0 +1,12 @@
/* eslint-disable */
var array = require('../wxs/array.wxs');
function isActive (activeList, itemId) {
if (array.isArray(activeList)) {
return activeList.indexOf(itemId) > -1;
}
return activeList === itemId;
}
module.exports.isActive = isActive;