Jelajahi Sumber

feat: 整卷复核试卷随缩略图点击滚动

chenhao 2 tahun lalu
induk
melakukan
c21e76cda4
1 mengubah file dengan 30 tambahan dan 1 penghapusan
  1. 30 1
      src/features/student/studentInspect/MarkBody.vue

+ 30 - 1
src/features/student/studentInspect/MarkBody.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="dragContainer" class="mark-body-container tw-flex-auto tw-p-2 tw-pt-0">
+  <div
+    ref="dragContainer"
+    class="mark-body-container tw-flex-auto tw-p-2 tw-pt-0"
+  >
     <div v-if="!store.currentTask" class="tw-text-center">
       {{ store.message }}
     </div>
@@ -130,6 +133,32 @@ const renderPaperAndMark = async () => {
 
 watch(() => store.currentTask, renderPaperAndMark);
 
+watch(
+  (): (number | undefined)[] => [
+    store.minimapScrollToX,
+    store.minimapScrollToY,
+  ],
+  () => {
+    const container = document.querySelector<HTMLDivElement>(
+      ".mark-body-container"
+    );
+    addTimeout(() => {
+      if (
+        container &&
+        typeof store.minimapScrollToX === "number" &&
+        typeof store.minimapScrollToY === "number"
+      ) {
+        const { scrollWidth, scrollHeight } = container;
+        container.scrollTo({
+          top: scrollHeight * store.minimapScrollToY,
+          left: scrollWidth * store.minimapScrollToX,
+          behavior: "smooth",
+        });
+      }
+    }, 10);
+  }
+);
+
 const answerPaperScale = $computed(() => {
   // 放大、缩小不影响页面之前的滚动条定位
   let percentWidth = 0;