blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-09-10 06:49:48 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] TreeSelect: support disable option (#926)

Browse Source
This commit is contained in:
neverland 2018-11-19 21:08:12 +08:00 committed by GitHub
parent 59eb467a5c
commit 42ab8ee7ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
example/pages/tree-select/config.js
View File

@ -2,29 +2,30 @@ export default {
pro1Name: '浙江', pro1Name: '浙江',
pro1: [{ pro1: [{
text: '杭州', text: '杭州',
id: 1001 id: 1
}, { }, {
text: '温州', text: '温州',
id: 1002 id: 2
}, { }, {
text: '宁波', text: '宁波',
id: 1003 id: 3,
disabled: true
}, { }, {
text: '义乌', text: '义乌',
id: 1004 id: 4
}], }],
pro2Name: '江苏', pro2Name: '江苏',
pro2: [{ pro2: [{
text: '南京', text: '南京',
id: 1011 id: 5
}, { }, {
text: '无锡', text: '无锡',
id: 1012 id: 6
}, { }, {
text: '徐州', text: '徐州',
id: 1013 id: 7
}, { }, {
text: '苏州', text: '苏州',
id: 1014 id: 8
}] }]
}; };

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

@ -20,7 +20,7 @@ Page({
} }
], ],
mainActiveIndex: 0, mainActiveIndex: 0,
activeId: 1002 activeId: 1
}, },
onClickNav({ detail }) { onClickNav({ detail }) {

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

@ -58,9 +58,9 @@ Page({
### 数据格式 ### 数据格式
#### items 分类显示所需数据的数据结构 #### items 分类显示所需数据的数据结构
`items` 整体为一个数组，数组内包含一系列描述分类的 object。 `items` 整体为一个数组，数组内包含一系列描述分类的对象
每个分类里，text表示当前分类的名称。children 表示分类里的可选项，为数组结构，id被用来唯一标识每个选项 每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项
```javascript ```javascript
[ [
@ -70,16 +70,16 @@ Page({
// 该导航下所有的可选项 // 该导航下所有的可选项
children: [ children: [
{ {
// 可选项的名称 // 名称
text: '温州', text: '温州',
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的 // id，作为匹配选中状态的标识
id: 1002 id: 1,
// 禁用选项
disabled: true
}, },
{ {
// 可选项的名称
text: '杭州', text: '杭州',
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的 id: 2
id: 1001
} }
] ]
} }

5
packages/tree-select/index.less
View File

@ -46,6 +46,11 @@
&--active { &--active {
color: @red; color: @red;
} }
&--disabled,
&--disabled:active {
color: @gray;
}
} }
&__selected { &__selected {

5
packages/tree-select/index.ts
View File

@ -42,7 +42,10 @@ VantComponent({
methods: { methods: {
// 当一个子项被选择时 // 当一个子项被选择时
onSelectItem(event: Weapp.Event) { onSelectItem(event: Weapp.Event) {
this.$emit('click-item', event.currentTarget.dataset.item); const { item } = event.currentTarget.dataset;
if (!item.disabled) {
this.$emit('click-item', item);
}
}, },
// 当一个导航被点击时 // 当一个导航被点击时

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

@ -21,7 +21,7 @@
<view <view
wx:for="{{ subItems }}" wx:for="{{ subItems }}"
wx:key="item.id" wx:key="item.id"
class="van-tree-select__item van-ellipsis {{ activeId === item.id ? 'van-tree-select__item--active' : '' }}" class="van-tree-select__item van-ellipsis {{ activeId === item.id ? 'van-tree-select__item--active' : '' }} {{ item.disabled ? 'van-tree-select__item--disabled' : '' }}"
data-item="{{ item }}" data-item="{{ item }}"
bind:tap="onSelectItem" bind:tap="onSelectItem"
> >