mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] TreeSelect: active-id support sync modifier (#4133)
This commit is contained in:
neverland
GitHub
parent
85356ac302
commit
a6b256aa01
@ -16,10 +16,8 @@ Vue.use(TreeSelect);
|
||||
```html
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:main-active-index="mainActiveIndex"
|
||||
:active-id="activeId"
|
||||
@click-nav="onClickNav"
|
||||
@click-item="onClickItem"
|
||||
:active-id.sync="activeId"
|
||||
:main-active-index.sync="mainActiveIndex"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -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"
|
||||
:main-active-index="mainActiveIndex"
|
||||
@click-nav="onClickNav"
|
||||
@click-item="onClickItem"
|
||||
:active-id.sync="activeIds"
|
||||
:main-active-index.sync="mainActiveIndex"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -60,24 +48,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
items,
|
||||
activeIds: 1,
|
||||
mainActiveIndex: 0,
|
||||
activeIds: [1, 2],
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -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,
|
||||
mainActiveIndex: 0,
|
||||
activeIds: [1, 2],
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -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: [{
|
||||
text: '杭州',
|
||||
id: 1
|
||||
}, {
|
||||
text: '温州',
|
||||
id: 2
|
||||
}, {
|
||||
text: '宁波',
|
||||
id: 3,
|
||||
disabled: true
|
||||
}, {
|
||||
text: '义乌',
|
||||
id: 4
|
||||
}],
|
||||
city2: [{
|
||||
text: '南京',
|
||||
id: 5
|
||||
}, {
|
||||
text: '无锡',
|
||||
id: 6
|
||||
}, {
|
||||
text: '徐州',
|
||||
id: 7
|
||||
}, {
|
||||
text: '苏州',
|
||||
id: 8
|
||||
}],
|
||||
city3: [{
|
||||
text: '泉州',
|
||||
id: 9
|
||||
}, {
|
||||
text: '厦门',
|
||||
id: 10
|
||||
}]
|
||||
city1: [
|
||||
{
|
||||
text: '杭州',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
text: '温州',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
text: '宁波',
|
||||
id: 3,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '义乌',
|
||||
id: 4
|
||||
}
|
||||
],
|
||||
city2: [
|
||||
{
|
||||
text: '南京',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
text: '无锡',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
text: '徐州',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
text: '苏州',
|
||||
id: 8
|
||||
}
|
||||
],
|
||||
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: [{
|
||||
text: 'Delaware',
|
||||
id: 1
|
||||
}, {
|
||||
text: 'Florida',
|
||||
id: 2
|
||||
}, {
|
||||
text: 'Georqia',
|
||||
id: 3,
|
||||
disabled: true
|
||||
}, {
|
||||
text: 'Indiana',
|
||||
id: 4
|
||||
}],
|
||||
city2: [{
|
||||
text: 'Alabama',
|
||||
id: 5
|
||||
}, {
|
||||
text: 'Kansas',
|
||||
id: 6
|
||||
}, {
|
||||
text: 'Louisiana',
|
||||
id: 7
|
||||
}, {
|
||||
text: 'Texas',
|
||||
id: 8
|
||||
}],
|
||||
city3: [{
|
||||
text: 'Alabama',
|
||||
id: 9
|
||||
}, {
|
||||
text: 'Kansas',
|
||||
id: 10
|
||||
}],
|
||||
city1: [
|
||||
{
|
||||
text: 'Delaware',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
text: 'Florida',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
text: 'Georqia',
|
||||
id: 3,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: 'Indiana',
|
||||
id: 4
|
||||
}
|
||||
],
|
||||
city2: [
|
||||
{
|
||||
text: 'Alabama',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
text: 'Kansas',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
text: 'Louisiana',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
text: 'Texas',
|
||||
id: 8
|
||||
}
|
||||
],
|
||||
city3: [
|
||||
{
|
||||
text: 'Alabama',
|
||||
id: 9
|
||||
},
|
||||
{
|
||||
text: 'Kansas',
|
||||
id: 10
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@ -120,37 +144,25 @@ export default {
|
||||
|
||||
computed: {
|
||||
items() {
|
||||
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);
|
||||
}
|
||||
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')
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user