fix(index-bar): support ssr and fix top value when click anchor

varletjs · Jan 20, 2022 · 6c7df9f · 6c7df9f
1 parent e107ce9
commit 6c7df9f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git 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
@@ -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')