From 6c7df9f4b218ca4174f610262112dbe8567fecc1 Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Thu, 20 Jan 2022 12:44:05 +0800
Subject: [PATCH] fix(index-bar): support ssr and fix top value when click
 anchor

---
 packages/varlet-ui/src/index-bar/IndexBar.vue | 22 +++++++++++--------
 .../src/index-bar/__tests__/index.spec.js     |  4 ++--
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/varlet-ui/src/index-bar/IndexBar.vue b/packages/varlet-ui/src/index-bar/IndexBar.vue
index 0d9ab5f20ce..08d95b55e5f 100644
--- a/packages/varlet-ui/src/index-bar/IndexBar.vue
+++ b/packages/varlet-ui/src/index-bar/IndexBar.vue
@@ -20,9 +20,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, nextTick, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { computed, defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { easeInOutCubic, isPlainObject, toNumber } from '../utils/shared'
 import {
+  doubleRaf,
   getParentScroller,
   getScrollLeft,
   nextTickFrame,
@@ -93,11 +94,13 @@ export default defineComponent({
     }
 
     const anchorClick = async (anchorName: string | number, manualCall?: boolean) => {
+      const { offsetTop } = barEl.value as HTMLElement
+
       if (manualCall) props.onClick?.(anchorName)
       if (anchorName === active.value) return
       const indexAnchor = indexAnchors.find(({ name }: IndexAnchorProvider) => anchorName === name.value)
       if (!indexAnchor) return
-      const top = indexAnchor.ownTop.value
+      const top = indexAnchor.ownTop.value - stickyOffsetTop.value + offsetTop
       const left = getScrollLeft(scrollEl.value as HTMLElement)
       clickedName.value = anchorName
       emitEvent(anchorName)
@@ -121,16 +124,17 @@ export default defineComponent({
 
     watch(
       () => length.value,
-      () =>
-        nextTick(() => {
-          indexAnchors.forEach(({ name, setOwnTop }) => {
-            if (name.value) anchorNameList.value.push(name.value)
-            setOwnTop()
-          })
+      async () => {
+        await doubleRaf()
+        indexAnchors.forEach(({ name, setOwnTop }) => {
+          if (name.value) anchorNameList.value.push(name.value)
+          setOwnTop()
         })
+      }
     )
 
-    onMounted(() => {
+    onMounted(async () => {
+      await doubleRaf()
       scroller.value = getParentScroller(barEl.value as HTMLDivElement)
       scrollEl.value =
         scroller.value === window
diff --git a/packages/varlet-ui/src/index-bar/__tests__/index.spec.js b/packages/varlet-ui/src/index-bar/__tests__/index.spec.js
index 2ee3f436599..bcdadcc101f 100644
--- a/packages/varlet-ui/src/index-bar/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/index-bar/__tests__/index.spec.js
@@ -103,7 +103,7 @@ test('test click anchor to trigger change event', async () => {
     { attachTo: document.body }
   )
 
-  await delay(0)
+  await delay(200)
 
   wrapper.vm.$refs.bar.scrollTo('A')
 
@@ -158,7 +158,7 @@ test('test scroll indexBar to trigger change event', async () => {
     { attachTo: document.body }
   )
 
-  await delay(0)
+  await delay(200)
 
   wrapper.vm.$refs.bar.scrollTo('A')