切换动画。修复填空题切换报错。

src/App.vue

@@ -1,9 +1,39 @@
 <template>
   <div id="app">
-    <router-view/>
+    <transition :name="transitionName">
+      <router-view></router-view>
+    </transition>
   </div>
 </template>
 
+<script>
+export default {
+  name: "APP",
+  data() {
+    return { transitionName: "" };
+  },
+  watch: {
+    $route(to, from) {
+      const toDepth = to.path.split("/").length;
+      const fromDepth = from.path.split("/").length;
+      if (toDepth < fromDepth) {
+        this.transitionName = "slide-right";
+      } else if (toDepth > fromDepth) {
+        this.transitionName = "slide-left";
+      } else if (to.query.examQuestionId && from.query.examQuestionId) {
+        if (to.query.examQuestionId < from.query.examQuestionId) {
+          this.transitionName = "slide-right";
+        } else if (to.query.examQuestionId > from.query.examQuestionId) {
+          this.transitionName = "slide-left";
+        }
+      }
+      console.log("App: " + this.transitionName);
+    }
+  }
+};
+</script>
+
+
 <style>
 #app {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -143,6 +143,7 @@ export default {
   grid-template-columns: 1fr 400px;
 
   height: 100vh;
+  width: 100vw;
 }
 
 .header {

src/features/OnlineExam/Examing/FillBlankQuestionView.vue

@@ -80,7 +80,7 @@ export default {
   },
   watch: {
     examQuestion: function() {
-      this.stuAnswer = this.examQuestion.stuAnswer;
+      this.stuAnswer = this.examQuestion.stuAnswer || "";
     }
   }
 };

src/features/OnlineExam/Examing/NestedQuestionView.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="question-view">
     <div class="question-body" v-html="question.body"></div>
+    <div class="hr" />
     <template v-if="subQuestion && subQuestion.questionType === 'SINGLE_ANSWER_QUESTION'">
       <single-question-view :question="subQuestion" :examQuestion="examQuestion" />
     </template>
@@ -74,6 +75,10 @@ export default {
   margin-bottom: 10px;
 }
 
+div.hr {
+  border-bottom: 1px dashed gray;
+}
+
 .ops {
   display: flex;
   align-items: flex-end;