套题可以调整高度

package.json

@@ -30,6 +30,7 @@
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-router": "^3.1.2",
+    "vue-splitpane": "^1.0.4",
     "vuedraggable": "^2.23.0",
     "vuex": "^3.1.1"
   },

src/features/OnlineExam/Examing/QuestionView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="overflow: auto">
+  <div class="question-container">
     <div class="question-header">
       <Icon
         :type="examQuestion.isSign ? 'ios-star' : 'ios-star-outline'"
@@ -12,104 +12,45 @@
         :examQuestion="examQuestion"
       />
     </div>
-    <div v-if="parentQuestionBody" class="question-view">
-      <question-body
-        :questionBody="parentQuestionBody"
-        :examQuestion="examQuestion"
-        style="margin-bottom: 20px"
-        :key="examQuestion.questionId"
-      ></question-body>
-      <div class="hr" />
-    </div>
-    <div v-if="!examQuestion.getQuestionContent">试题获取中...</div>
-
-    <transition name="fade">
-      <div
-        v-show="question && examQuestion && examQuestion.getQuestionContent"
-        class="question-view"
-        :key="examQuestion.order"
-      >
-        <div style="margin-bottom: -45px;">{{ examQuestion.groupOrder }}、</div>
-        <template
-          v-if="
-            question &&
-              question.questionType === 'SINGLE_CHOICE' &&
-              examQuestion.questionType === 'SINGLE_CHOICE'
-          "
-        >
-          <single-question-view
-            :question="question"
-            :examQuestion="examQuestion"
-            :key="examQuestion.order"
-          />
-        </template>
-        <template
-          v-if="
-            question &&
-              question.questionType === 'MULTIPLE_CHOICE' &&
-              examQuestion.questionType === 'MULTIPLE_CHOICE'
-          "
-        >
-          <multiple-question-view
-            :question="question"
+    <split-pane
+      v-if="parentQuestionBody"
+      :min-percent="10"
+      :default-percent="parentPaneHeight"
+      split="horizontal"
+    >
+      <template slot="paneL">
+        <div v-if="parentQuestionBody" class="question-view parent-question">
+          <question-body
+            :questionBody="parentQuestionBody"
             :examQuestion="examQuestion"
-            :key="examQuestion.order"
-          />
-        </template>
-        <template
-          v-if="
-            question &&
-              question.questionType === 'TRUE_OR_FALSE' &&
-              examQuestion.questionType === 'TRUE_OR_FALSE'
-          "
-        >
-          <boolean-question-view
-            :question="question"
-            :examQuestion="examQuestion"
-            :key="examQuestion.order"
-          />
-        </template>
-        <template
-          v-if="
-            question &&
-              question.questionType === 'FILL_UP' &&
-              examQuestion.questionType === 'FILL_UP'
-          "
-        >
-          <fill-blank-question-view
-            :question="question"
-            :examQuestion="examQuestion"
-            :key="examQuestion.order"
-          />
-        </template>
-        <template
-          v-if="
-            question &&
-              question.questionType === 'ESSAY' &&
-              examQuestion.questionType === 'ESSAY'
-          "
-        >
-          <text-question-view
-            :question="question"
-            :examQuestion="examQuestion"
-            :key="examQuestion.order"
-          />
-        </template>
-      </div>
-    </transition>
+            style="margin-bottom: 20px"
+            :key="examQuestion.questionId"
+          ></question-body>
+          <!-- <div class="hr" /> -->
+        </div>
+      </template>
+      <template slot="paneR">
+        <QuestionViewSingle :question="question" :examQuestion="examQuestion" />
+      </template>
+    </split-pane>
+
+    <QuestionViewSingle
+      v-if="!parentQuestionBody"
+      :question="question"
+      :examQuestion="examQuestion"
+    />
+
+    <div v-if="!examQuestion.getQuestionContent">试题获取中...</div>
   </div>
 </template>
 
 <script>
 import QuestionIndex from "./QuestionIndex";
 import QuestionBody from "./QuestionBody";
-import SingleQuestionView from "./SingleQuestionView";
-import MultipleQuestionView from "./MultipleQuestionView";
-import BooleanQuestionView from "./BooleanQuestionView";
-import FillBlankQuestionView from "./FillBlankQuestionView";
-import TextQuestionView from "./TextQuestionView";
+import QuestionViewSingle from "./QuestionViewSingle";
 import { createNamespacedHelpers } from "vuex";
 const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
+import splitPane from "vue-splitpane";
 
 export default {
   name: "QuestionView",
@@ -117,6 +58,7 @@ export default {
     return {
       parentQuestionBody: null,
       question: null,
+      parentPaneHeight: 50,
     };
   },
   props: {
@@ -125,6 +67,7 @@ export default {
   created() {
     this.updateQuestion();
   },
+  mounted() {},
   methods: {
     ...mapMutations(["updateExamQuestion"]),
     async updateQuestion() {
@@ -236,6 +179,21 @@ export default {
       this.question =
         question.questionUnitList[currentExamQuestion.subNumber - 1];
 
+      this.$nextTick(() => {
+        // 从非套题进入套题时，会根据套题的内容动态调整套题的默认高度
+        const parentQuestion = document.getElementsByClassName(
+          "parent-question"
+        )[0];
+        if (parentQuestion) {
+          this.parentPaneHeight =
+            5 +
+            (100 * parentQuestion.clientHeight) /
+              (document.body.clientHeight - 160);
+          if (this.parentPaneHeight > 60) {
+            this.parentPaneHeight = 60;
+          }
+        }
+      });
       {
         // cache next question content
         const currentOrder = currentExamQuestion.order;
@@ -267,21 +225,30 @@ export default {
   components: {
     QuestionIndex,
     QuestionBody,
-    SingleQuestionView,
-    MultipleQuestionView,
-    BooleanQuestionView,
-    FillBlankQuestionView,
-    TextQuestionView,
+    "split-pane": splitPane,
+    QuestionViewSingle,
   },
 };
 </script>
 
 <style scoped>
+.question-container {
+  overflow: scroll;
+}
+.question-container >>> .splitter-pane {
+  overflow: scroll;
+}
+.question-container >>> .vue-splitter-container {
+  height: calc(100% - 42px);
+}
+.question-container >>> .splitter-pane-resizer.horizontal {
+  height: 15px;
+}
 .question-view {
   padding: 20px 30px;
   font-size: 16px;
   text-align: left;
-  overflow: auto;
+  overflow: scroll;
 }
 
 .question-header {

src/features/OnlineExam/Examing/QuestionViewSingle.vue

@@ -0,0 +1,108 @@
+<template>
+  <transition name="fade">
+    <div
+      v-show="question && examQuestion && examQuestion.getQuestionContent"
+      class="question-view"
+      :key="examQuestion.order"
+    >
+      <div style="margin-bottom: -45px;">{{ examQuestion.groupOrder }}、</div>
+      <template
+        v-if="
+          question &&
+            question.questionType === 'SINGLE_CHOICE' &&
+            examQuestion.questionType === 'SINGLE_CHOICE'
+        "
+      >
+        <single-question-view
+          :question="question"
+          :examQuestion="examQuestion"
+          :key="examQuestion.order"
+        />
+      </template>
+      <template
+        v-if="
+          question &&
+            question.questionType === 'MULTIPLE_CHOICE' &&
+            examQuestion.questionType === 'MULTIPLE_CHOICE'
+        "
+      >
+        <multiple-question-view
+          :question="question"
+          :examQuestion="examQuestion"
+          :key="examQuestion.order"
+        />
+      </template>
+      <template
+        v-if="
+          question &&
+            question.questionType === 'TRUE_OR_FALSE' &&
+            examQuestion.questionType === 'TRUE_OR_FALSE'
+        "
+      >
+        <boolean-question-view
+          :question="question"
+          :examQuestion="examQuestion"
+          :key="examQuestion.order"
+        />
+      </template>
+      <template
+        v-if="
+          question &&
+            question.questionType === 'FILL_UP' &&
+            examQuestion.questionType === 'FILL_UP'
+        "
+      >
+        <fill-blank-question-view
+          :question="question"
+          :examQuestion="examQuestion"
+          :key="examQuestion.order"
+        />
+      </template>
+      <template
+        v-if="
+          question &&
+            question.questionType === 'ESSAY' &&
+            examQuestion.questionType === 'ESSAY'
+        "
+      >
+        <text-question-view
+          :question="question"
+          :examQuestion="examQuestion"
+          :key="examQuestion.order"
+        />
+      </template>
+    </div>
+  </transition>
+</template>
+
+<script>
+import SingleQuestionView from "./SingleQuestionView";
+import MultipleQuestionView from "./MultipleQuestionView";
+import BooleanQuestionView from "./BooleanQuestionView";
+import FillBlankQuestionView from "./FillBlankQuestionView";
+import TextQuestionView from "./TextQuestionView";
+
+export default {
+  name: "QuestionViewSingle",
+  props: {
+    question: Object,
+    examQuestion: Object,
+  },
+  components: {
+    SingleQuestionView,
+    MultipleQuestionView,
+    BooleanQuestionView,
+    FillBlankQuestionView,
+    TextQuestionView,
+  },
+};
+</script>
+
+<style scoped>
+.question-view {
+  padding: 20px 30px;
+  font-size: 16px;
+  text-align: left;
+  overflow: auto;
+}
+</style>

yarn.lock

@@ -10694,6 +10694,11 @@ vue-router@^3.1.2:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.2.tgz#2e0904703545dabdd42b2b7a2e617f02f99a1969"
   integrity sha512-WssQEHSEvIS1/CI4CO2T8LJdoK4Q9Ngox28K7FDNMTfzNTk2WS5D0dDlqYCaPG+AG4Z8wJkn1KrBc7AhspZJUQ==
 
+vue-splitpane@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vue-splitpane/-/vue-splitpane-1.0.4.tgz#cdf744a8f31bedcb086e9545a9453565d360bd02"
+  integrity sha512-aSLmwNyqWCtn4q/JlEXa/UB9/zP1SLODfmMJof+qitL91Rz6g13cJKGmNEHJtBp6ivsk6p74fGfXUJUB3Izuig==
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"