mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-25 10:56:35 +08:00
[new feature] IndexBar: add select event
This commit is contained in:
parent
f0e336cb4f
commit
1d658a9338
@ -68,6 +68,12 @@ export default {
|
|||||||
|------|------|------|------|
|
|------|------|------|------|
|
||||||
| index | Index | `String | Number` | - |
|
| index | Index | `String | Number` | - |
|
||||||
|
|
||||||
|
### IndexBar Events
|
||||||
|
|
||||||
|
| Event | Description | Arguments |
|
||||||
|
|------|------|------|
|
||||||
|
| select | Triggered when select index | index |
|
||||||
|
|
||||||
### IndexAnchor Slots
|
### IndexAnchor Slots
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
|
@ -60,6 +60,7 @@ export default sfc({
|
|||||||
const match = this.children.filter(item => String(item.index) === index);
|
const match = this.children.filter(item => String(item.index) === index);
|
||||||
if (match[0]) {
|
if (match[0]) {
|
||||||
match[0].scrollIntoView();
|
match[0].scrollIntoView();
|
||||||
|
this.$emit('select', match[0].index);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -26,30 +26,40 @@ test('custom anchor text', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('click and scroll to anchor', () => {
|
test('click and scroll to anchor', () => {
|
||||||
|
const onSelect = jest.fn();
|
||||||
const wrapper = mount({
|
const wrapper = mount({
|
||||||
template: `
|
template: `
|
||||||
<van-index-bar>
|
<van-index-bar @select="onSelect">
|
||||||
<van-index-anchor index="A" />
|
<van-index-anchor index="A" />
|
||||||
<van-index-anchor index="B" />
|
<van-index-anchor index="B" />
|
||||||
</van-index-bar>
|
</van-index-bar>
|
||||||
`
|
`,
|
||||||
|
methods: {
|
||||||
|
onSelect
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const fn = mockScrollIntoView();
|
const fn = mockScrollIntoView();
|
||||||
const indexes = wrapper.findAll('.van-index-bar__index');
|
const indexes = wrapper.findAll('.van-index-bar__index');
|
||||||
indexes.at(0).trigger('click');
|
indexes.at(0).trigger('click');
|
||||||
|
|
||||||
expect(fn).toHaveBeenCalledTimes(1);
|
expect(fn).toHaveBeenCalledTimes(1);
|
||||||
|
expect(onSelect).toHaveBeenCalledWith('A');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('touch and scroll to anchor', () => {
|
test('touch and scroll to anchor', () => {
|
||||||
|
const onSelect = jest.fn();
|
||||||
const wrapper = mount({
|
const wrapper = mount({
|
||||||
template: `
|
template: `
|
||||||
<van-index-bar>
|
<van-index-bar @select="onSelect">
|
||||||
<van-index-anchor index="A" />
|
<van-index-anchor index="A" />
|
||||||
<van-index-anchor index="B" />
|
<van-index-anchor index="B" />
|
||||||
<van-index-anchor index="XXX" />
|
<van-index-anchor index="XXX" />
|
||||||
</van-index-bar>
|
</van-index-bar>
|
||||||
`
|
`,
|
||||||
|
methods: {
|
||||||
|
onSelect
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const fn = mockScrollIntoView();
|
const fn = mockScrollIntoView();
|
||||||
@ -82,4 +92,5 @@ test('touch and scroll to anchor', () => {
|
|||||||
trigger(sidebar, 'touchmove', 0, 400);
|
trigger(sidebar, 'touchmove', 0, 400);
|
||||||
trigger(sidebar, 'touchend', 0, 400);
|
trigger(sidebar, 'touchend', 0, 400);
|
||||||
expect(fn).toHaveBeenCalledTimes(1);
|
expect(fn).toHaveBeenCalledTimes(1);
|
||||||
|
expect(onSelect).toHaveBeenCalledWith('B');
|
||||||
});
|
});
|
||||||
|
@ -72,6 +72,12 @@ export default {
|
|||||||
|------|------|------|------|------|
|
|------|------|------|------|------|
|
||||||
| index | 索引字符 | `String | Number` | - | - |
|
| index | 索引字符 | `String | Number` | - | - |
|
||||||
|
|
||||||
|
### IndexBar Events
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 回调参数 |
|
||||||
|
|------|------|------|
|
||||||
|
| select | 选中字符时触发 | index: 索引字符 |
|
||||||
|
|
||||||
### IndexAnchor Slots
|
### IndexAnchor Slots
|
||||||
|
|
||||||
| 名称 | 说明 |
|
| 名称 | 说明 |
|
||||||
|
Loading…
x
Reference in New Issue
Block a user