Pārlūkot izejas kodu

键盘模式:自动滚动到对应的题

Michael Wang 4 gadi atpakaļ
vecāks
revīzija
4b3ca56987

+ 8 - 0
src/features/mark/MarkBoardKeyBoard.vue

@@ -74,6 +74,7 @@
           "
           class="question tw-rounded tw-p-1 tw-mb-2 tw-cursor-pointer"
           :class="isCurrentQuestion(question) && 'current-question'"
+          :id="'bq-' + question.mainNumber + '-' + question.subNumber"
         >
           <div class="tw-flex tw-justify-between">
             <div>
@@ -295,6 +296,13 @@ const scrollToQuestion = (question: Question) => {
   node && node.scrollIntoView({ behavior: "smooth" });
 };
 
+watch(
+  () => store.currentQuestion,
+  () => {
+    store.currentQuestion && scrollToQuestion(store.currentQuestion);
+  }
+);
+
 function submit() {
   const errors: any = [];
   store.currentTask?.questionList.forEach((question, index) => {

+ 36 - 0
src/features/mark/use/autoChooseFirstQuestion.ts

@@ -2,8 +2,44 @@ import { Question } from "@/types";
 import { store } from "../store";
 import { watch } from "vue";
 
+const scrollToQuestionOfBoard = async (question: Question) => {
+  const node = document.querySelector(
+    `#bq-${question.mainNumber}-${question.subNumber}`
+  );
+  const questionNode = document.querySelector(
+    `#q-${question.mainNumber}-${question.subNumber}`
+  );
+  if (!questionNode) {
+    // 非多媒体阅卷
+    node && node.scrollIntoView({ block: "center", behavior: "smooth" });
+    return;
+  }
+  // console.log(node);
+  // node && node.scrollIntoView({ behavior: "smooth" });
+  // if (node) node.scrollBy({ top: -50 });
+  // setTimeout(() => {
+  //   if (node) node.parentElement?.scrollTo({ top: 50, left: 0 });
+  //   // node && node.scrollTop = 50//node.scrollIntoView({ behavior: "auto", block: "center" });
+  //   if(node.)
+  // }, 1500);
+  async function checkIfEleMoving(ele: Element) {
+    const { top: oldTop } = ele.getBoundingClientRect();
+    await new Promise((res) => setTimeout(res, 200));
+    // console.log(ele.getBoundingClientRect().top, oldTop);
+    return ele.getBoundingClientRect().top - oldTop !== 0;
+  }
+  if (questionNode) {
+    let isMoving = await checkIfEleMoving(questionNode);
+    while (isMoving) {
+      isMoving = await checkIfEleMoving(questionNode);
+    }
+    node && node.scrollIntoView({ block: "center", behavior: "smooth" });
+  }
+};
+
 export function chooseQuestion(question: Question) {
   store.currentQuestion = question;
+  scrollToQuestionOfBoard(question);
 }
 
 /** chooseQuestion 当currentTask改变是,自动选择第一题 */