fix(Indexes): fix IndexesAnchor invalid when indexList is async data

Tencent · Oct 16, 2024 · e939cda · e939cda
1 parent 88e15da
commit e939cda
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/indexes/__test__/index.test.jsx b/src/indexes/__test__/index.test.jsx
@@ -157,8 +157,9 @@ describe('Indexes', () => {
       });
       await wrapper.find(`.${indexesClass}__sidebar-item`).trigger('click');
       expect(selectFn).toBeCalledWith(list[0].index);
+      expect(changeFn).toBeCalledWith(list[0].index);
 
-      const items = wrapper.findAll(`.${indexesClass}__sidebar-item`);
+      const items = await wrapper.findAll(`.${indexesClass}__sidebar-item`);
       await items[1].trigger('click');
       expect(selectFn).toBeCalledWith(list[1].index);
       expect(changeFn).toBeCalledWith(list[1].index);

diff --git a/src/indexes/indexes.tsx b/src/indexes/indexes.tsx
@@ -9,6 +9,7 @@ import {
   computed,
   watch,
   ComponentPublicInstance,
+  nextTick,
 } from 'vue';
 import throttle from 'lodash/throttle';
 import { preventDefault } from '../shared/dom';
@@ -191,16 +192,22 @@ export default defineComponent({
       },
     );
 
-    onMounted(() => {
-      parentRect.value = indexesRoot.value?.getBoundingClientRect() || { top: 0 };
-      getAnchorsRect().then(() => {
-        groupTop.forEach((item, index) => {
-          const next = groupTop[index + 1];
-          item.totalHeight = (next?.top || Infinity) - item.top;
+    const init = () => {
+      nextTick(() => {
+        parentRect.value = indexesRoot.value?.getBoundingClientRect() || { top: 0 };
+        getAnchorsRect().then(() => {
+          groupTop.forEach((item, index) => {
+            const next = groupTop[index + 1];
+            item.totalHeight = (next?.top || Infinity) - item.top;
+          });
+          setAnchorOnScroll(0);
         });
-        setAnchorOnScroll(0);
       });
-    });
+    };
+
+    onMounted(init);
+
+    watch(() => props.indexList, init);
 
     onBeforeUnmount(() => {
       timeOut && clearTimeout(timeOut);