diff --git a/src/index-bar/README.md b/src/index-bar/README.md index 2e953e54f..ec0856ced 100644 --- a/src/index-bar/README.md +++ b/src/index-bar/README.md @@ -78,9 +78,10 @@ export default { ### IndexBar Events -| Event | Description | Arguments | -| ------ | --------------------------- | --------- | -| select | Triggered when select index | index | +| Event | Description | Arguments | +| --- | --- | --- | +| select | Triggered when select index | _index: number \| string_ | +| change `v2.10.10` | Triggered when active index changed | _index: number \| string_ | ### IndexAnchor Slots diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md index d2133f05b..f0d6027f2 100644 --- a/src/index-bar/README.zh-CN.md +++ b/src/index-bar/README.zh-CN.md @@ -82,9 +82,10 @@ export default { ### IndexBar Events -| 事件名 | 说明 | 回调参数 | -| ------ | -------------- | --------------- | -| select | 选中字符时触发 | index: 索引字符 | +| 事件名 | 说明 | 回调参数 | +| ----------------- | ---------------------------- | ------------------------- | +| select | 点击索引栏的字符时触发 | _index: number \| string_ | +| change `v2.10.10` | 当前高亮的索引字符变化时触发 | _index: number \| string_ | ### IndexAnchor Slots diff --git a/src/index-bar/index.js b/src/index-bar/index.js index aac5f009d..b3b93cf6d 100644 --- a/src/index-bar/index.js +++ b/src/index-bar/index.js @@ -87,6 +87,12 @@ export default createComponent({ indexList() { this.$nextTick(this.onScroll); }, + + activeAnchorIndex(value) { + if (value) { + this.$emit('change', value); + } + }, }, methods: { @@ -201,6 +207,7 @@ export default createComponent({ const match = this.children.filter( (item) => String(item.index) === index ); + if (match[0]) { match[0].scrollIntoView(); diff --git a/src/index-bar/test/__snapshots__/index.spec.js.snap b/src/index-bar/test/__snapshots__/index.spec.js.snap index 66721ebb2..2891d0dfb 100644 --- a/src/index-bar/test/__snapshots__/index.spec.js.snap +++ b/src/index-bar/test/__snapshots__/index.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`custom anchor text 1`] = ` +exports[`should allow to custom anchor text 1`] = `
ABCDEFGHIJKLMNOPQRSTUVWXYZ
@@ -12,7 +12,7 @@ exports[`custom anchor text 1`] = `
`; -exports[`scroll and update active anchor 1`] = ` +exports[`should update active anchor after page scroll 1`] = `
ABCDEFGHIJKLMNOPQRSTUVWXYZ
@@ -30,7 +30,7 @@ exports[`scroll and update active anchor 1`] = `
`; -exports[`scroll and update active anchor 2`] = ` +exports[`should update active anchor after page scroll 2`] = `
ABCDEFGHIJKLMNOPQRSTUVWXYZ
diff --git a/src/index-bar/test/index.spec.js b/src/index-bar/test/index.spec.js index 4728c9f0d..65390e9fb 100644 --- a/src/index-bar/test/index.spec.js +++ b/src/index-bar/test/index.spec.js @@ -8,7 +8,7 @@ function mockOffsetHeight(offsetHeight) { }); } -test('custom anchor text', () => { +test('should allow to custom anchor text', () => { const wrapper = mount({ template: ` @@ -21,7 +21,7 @@ test('custom anchor text', () => { expect(wrapper).toMatchSnapshot(); }); -test('click and scroll to anchor', () => { +test('should scroll to anchor and emit select event after clicking the index-bar', () => { const onSelect = jest.fn(); const wrapper = mount({ template: ` @@ -43,7 +43,7 @@ test('click and scroll to anchor', () => { expect(onSelect).toHaveBeenCalledWith('A'); }); -test('touch and scroll to anchor', () => { +test('should scroll to anchor after touching the index-bar', () => { const onSelect = jest.fn(); const wrapper = mount({ template: ` @@ -91,7 +91,7 @@ test('touch and scroll to anchor', () => { expect(onSelect).toHaveBeenCalledWith('B'); }); -test('scroll and update active anchor', () => { +test('should update active anchor after page scroll', () => { const nativeRect = Element.prototype.getBoundingClientRect; Element.prototype.getBoundingClientRect = function () { const { index } = this.dataset; @@ -131,3 +131,45 @@ test('scroll and update active anchor', () => { Element.prototype.getBoundingClientRect = nativeRect; }); + +test('should emit change event when active index changed', () => { + const nativeRect = Element.prototype.getBoundingClientRect; + Element.prototype.getBoundingClientRect = function () { + const { index } = this.dataset; + return { + top: index ? index * 10 : 0, + }; + }; + + mockOffsetHeight(10); + + const onChange = jest.fn(); + + mount({ + template: ` + + + + `, + methods: { + onChange, + }, + }); + + window.scrollTop = 0; + trigger(window, 'scroll'); + expect(onChange).toHaveBeenCalledTimes(1); + expect(onChange).toHaveBeenLastCalledWith('B'); + + window.scrollTop = 100; + trigger(window, 'scroll'); + expect(onChange).toHaveBeenCalledTimes(2); + expect(onChange).toHaveBeenLastCalledWith('D'); + + Element.prototype.getBoundingClientRect = nativeRect; +});