feat: 查看解析

liufangjia
1 parent 7f592639
Showing 2 changed files with 102 additions and 1 deletions
src/views/basic/askTestQuestion/components/analysisDialog.vue
src/views/basic/askTestQuestion/wrongQuestion.vue
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    width="50%"
+    :before-close="handleClose"
+    :modal-append-to-body="false"
+  >
+    <div class="test-box" v-if="analysisUrl">
+      <iframe
+        :src="analysisUrl"
+        ref="iframe"
+        @load="onIFrameLoad()"
+        style="width: 100%; border: none; /* 启用点击穿透 */"
+      ></iframe>
+    </div>
+
+    <span slot="title" class="title"> 题目解析 </span>
+  </el-dialog>
+</template>
+  <script>
+export default {
+  name: "analysisDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
+    analysisUrl: {
+      // 科目
+      type: String,
+      default() {
+        return null;
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+
+  watch: {
+    visible(val) {
+      if (val) {
+        console.log(val);
+      } else {
+        this.handleClose();
+      }
+    },
+  },
+  methods: {
+    /** 按钮 - 取消 */
+    handleClose() {
+      this.$emit("update:visible", false);
+    },
+
+    onIFrameLoad() {
+      const iframeRef = this.$refs.iframe; // 获取对应的 iframe
+      const doc = iframeRef.contentDocument || iframeRef.contentWindow.document;
+      const body = iframeRef.contentWindow.document.body;
+      body.style.overflowX = "hidden"; // 不允许出现横向滚动条
+      const height = body.scrollHeight; // 获取内容的高度
+      iframeRef.style.height = `${height + 20}px`; // 设置 iframe 的高度
+      // 获取第一个P标签
+      const firstP = doc.getElementsByTagName("p")[0];
+      // 或者修改第一个 < p > 标签的内容;
+      if (firstP) {
+        let a = this.processString(firstP.innerHTML);
+        firstP.innerHTML = a;
+      }
+    },
+  },
+};
+</script>
+  <style lang="scss" scoped>
+.title {
+  font-weight: 600;
+}
+.test-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>
 \ No newline at end of file
@@ -168,7 +168,10 @@
           <!-- <div class="topic-info" v-html="item.modifiedHtml"></div> -->
           <div class="topic-bottom">
             <div>
-              <span v-if="item.answerScreenshot" class="knowledge size"
+              <span
+                v-if="item.answerScreenshot"
+                class="knowledge size"
+                @click="handleAnalysis(item.answerScreenshot)"
                 ><i class="el-icon-key"></i>查看解析</span
               >
               <span class="color size">知识点：</span>
@@ -242,15 +245,21 @@
       :gradeId="formData.grade"
       @setQuestions="setQuestions"
     />
+    <analysisDialog
+      :visible.sync="analysisVisible"
+      :analysisUrl="analysisUrl"
+    />
   </div>
 </template>
  
   <script>
 import { setDateRules } from "@/utils";
 import wrongQuestionDialog from "./components/wrongQuestionDialog.vue";
+import analysisDialog from "./components/analysisDialog.vue";
 export default {
   components: {
     wrongQuestionDialog,
+    analysisDialog,
   },
   data() {
     return {
@@ -259,6 +268,8 @@ export default {
       maxValue: 100, // 最大值
       visible: false, // 购物车弹框控制
       queryLoading: false, //loading
+      analysisUrl: null, // 解析url
+      analysisVisible: false, // 解析弹框
       // 分页
       listPage: {
         page: 1,
@@ -597,6 +608,12 @@ export default {
     setQuestions() {
       this.questions = JSON.parse(localStorage.getItem("testlist")) || [];
     },
+
+    //  查看解析
+    handleAnalysis(url) {
+      this.analysisUrl = url;
+      this.analysisVisible = true;
+    },
   },
 };
 </script>