[new feature] IndexBar: add select event

This commit is contained in:
陈嘉涵 2019-05-08 16:53:22 +08:00
parent f0e336cb4f
commit 1d658a9338
4 changed files with 28 additions and 4 deletions

View File

@ -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 |

View File

@ -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);
} }
}, },

View File

@ -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');
}); });

View File

@ -72,6 +72,12 @@ export default {
|------|------|------|------|------| |------|------|------|------|------|
| index | 索引字符 | `String | Number` | - | - | | index | 索引字符 | `String | Number` | - | - |
### IndexBar Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| select | 选中字符时触发 | index: 索引字符 |
### IndexAnchor Slots ### IndexAnchor Slots
| 名称 | 说明 | | 名称 | 说明 |