Browse Source

切换到预览位置,返回时候滚动到相应为止

黄琪勇 2 months ago
parent
commit
eb5e812f65
1 changed files with 11 additions and 1 deletions
  1. 11 1
      src/views/Editor/Thumbnails/index.vue

+ 11 - 1
src/views/Editor/Thumbnails/index.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch } from "vue"
+import { computed, nextTick, onMounted, ref, watch } from "vue"
 import { storeToRefs } from "pinia"
 import { useMainStore, useSlidesStore, useKeyboardStore } from "@/store"
 import { fillDigit } from "@/utils/common"
@@ -146,6 +146,16 @@ watch(
   }
 )
 
+// 从预览切换回来的时候 滚动到对应的位置
+onMounted(() => {
+  const activeThumbnailRef: HTMLElement = thumbnailsRef.value?.$el?.querySelector(".thumbnail-item.active")
+  if (thumbnailsRef.value && activeThumbnailRef && !isElementInViewport(activeThumbnailRef, thumbnailsRef.value.$el)) {
+    setTimeout(() => {
+      activeThumbnailRef.scrollIntoView()
+    }, 100)
+  }
+})
+
 // 切换页面
 const changeSlideIndex = (index: number) => {
   mainStore.setActiveElementIdList([])