调卷页面的答案图片点击后，显示大图预览控件

src/modules/oe/views/examPaperDetail.vue

@@ -1,6 +1,14 @@
 <template>
   <div id="paperView">
     <div id="paperName">{{ paperStruct.name }}</div>
+    <el-image
+      ref="elImage"
+      style="width: 0; height: 0"
+      :src="previewSrc"
+      :preview-src-list="previewList"
+      @load="elImageLoad"
+    >
+    </el-image>
     <div id="studentInfoDiv">
       <table id="studentInfoTable" border>
         <thead>
@@ -88,7 +96,10 @@
                 style="color: blue; font-weight: bold"
               >
                 学生答案：
-                <span v-html="questionUnit.studentAnswer"></span>
+                <span
+                  @click="answerClick"
+                  v-html="questionUnit.studentAnswer"
+                ></span>
                 <i
                   v-show="
                     questionUnit.isObjectiveQuestion && questionUnit.isRight
@@ -164,6 +175,8 @@ export default {
       courseInfo: {},
       paperStruct: {},
       examQuestionList: [],
+      previewList: [],
+      previewSrc: "",
     };
   },
   created() {
@@ -174,6 +187,26 @@ export default {
     this.getPaperData();
   },
   methods: {
+    elImageLoad() {
+      let img = this.$refs.elImage.$el.querySelector(".el-image__preview");
+      img.click();
+    },
+    answerClick(e) {
+      e.preventDefault();
+      if ((e.target.className || "").includes("photo-answer")) {
+        this.previewSrc = e.target.src;
+        this.previewList = [e.target.src];
+        setTimeout(() => {
+          try {
+            let img =
+              this.$refs.elImage.$el.querySelector(".el-image__preview");
+            img.click();
+          } catch (err) {
+            console.log(err);
+          }
+        }, 10);
+      }
+    },
     getExamRecordData() {
       this.$http
         .get("/api/ecs_oe_admin/exam/record/data/findExamRecordDataEntity", {