feat(IndexBar): add change event (#7296)

* feat(IndexBar): add change event

* docs(IndexBar): update event param

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
 

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
 

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();
 

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`] = `
 <div class="van-index-bar">
   <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
   <div>
@@ -12,7 +12,7 @@ exports[`custom anchor text 1`] = `
 </div>
 `;
 
-exports[`scroll and update active anchor 1`] = `
+exports[`should update active anchor after page scroll 1`] = `
 <div class="van-index-bar">
   <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index van-index-bar__index--active">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
   <div data-index="0">
@@ -30,7 +30,7 @@ exports[`scroll and update active anchor 1`] = `
 </div>
 `;
 
-exports[`scroll and update active anchor 2`] = `
+exports[`should update active anchor after page scroll 2`] = `
 <div class="van-index-bar">
   <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
   <div data-index="0" style="height: 10px;">

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: `
       <van-index-bar>
@@ -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: `
+      <van-index-bar @change="onChange">
+        <van-index-anchor
+          v-for="index in 4"
+          :key="index"
+          :index="index"
+          :data-index="index - 1"
+        />
+      </van-index-bar>
+    `,
+    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;
+});