improve paper preview optimise while paper-parse take too much time.

src/views/questioncenter/PaperPreview.vue

@@ -1,4 +1,4 @@
-<template >
+<template>
   <div class="preview_container">
     <el-card>
       <div class="paper_header">
@@ -6,11 +6,11 @@
         <div class="operation">
           <div class="shoucan">
             <div v-if="collectFlag" class="fx-row ai-center" @click="cancelCollect()">
-              <img src="@/assets/images/icon_shoucang_s.png" alt="" />
+              <img src="@/assets/images/icon_shoucang_s.png" alt=""/>
               <span class="sc_text">已收藏</span>
             </div>
             <div v-else @click="Collect()" class="fx-row ai-center">
-              <img src="@/assets/images/icon_shoucang_n.png" alt="" />
+              <img src="@/assets/images/icon_shoucang_n.png" alt=""/>
               <span class="sc_text">收藏</span>
             </div>
             <span class="btn" @click="paperDownLoad(paperId)">下载试卷</span>
@@ -44,25 +44,26 @@
             <div class="operation">
               <div class="shoucan">
                 <div v-show="item.collect" @click="toCancelCollectQue(item)" style="display: flex;align-items: center;">
-                  <img src="@/assets/images/icon_shoucang_s.png" alt="" />
+                  <img src="@/assets/images/icon_shoucang_s.png" alt=""/>
                   <span>已收藏</span>
                 </div>
                 <div v-show="!item.collect" @click="toCollectQue(item)" style="display: flex;align-items: center;">
-                  <img src="@/assets/images/icon_shoucang_n.png" alt="" />
+                  <img src="@/assets/images/icon_shoucang_n.png" alt=""/>
                   <span>收藏</span>
                 </div>
               </div>
               <div class="jiucuo mr20" @click="$refs.correct.open(item.id)">
-                    <img src="@/assets/images/icon_jiucuo.png" alt="" />
-                    <span>纠错</span>
-                  </div>
-              <div class="detail" @click="handle(index)">
-                <img src="@/assets/images/icon_chakan.png" alt="" />
+                <img src="@/assets/images/icon_jiucuo.png" alt=""/>
+                <span>纠错</span>
+              </div>
+              <div class="detail" @click="handleParseVisible(item)">
+                <img src="@/assets/images/icon_chakan.png" alt=""/>
                 <span>查看详情>></span>
               </div>
             </div>
           </div>
-          <div v-show="item.updateTime" class="info" v-html="item.parse"></div>
+          <!-- NOTE: 改v-if否则全部公式渲染太费时间 -->
+          <div :id="`question_parse_${item.id}`" v-if="item.updateTime" class="info" v-html="item.parse"></div>
         </div>
       </div>
     </el-card>
@@ -71,95 +72,93 @@
 </template>
 <script>
 import {
-  preview,
-  queCollect,
-  queCancelCollect,
+  downloadRealPaper,
+  isCollected,
   papersCancelCollect,
   papersCollect,
-  isCollected,
-  downloadRealPaper
-} from "@/api/webApi/webQue.js";
+  preview,
+  queCancelCollect,
+  queCollect
+} from '@/api/webApi/webQue.js'
 import { mapGetters } from 'vuex'
-import correctQuestion from '../../components/MxPaper/plus/correct-question-dialog.vue';
+import correctQuestion from '../../components/MxPaper/plus/correct-question-dialog.vue'
+
 export default {
   components: { correctQuestion },
   data() {
     return {
       collectFlag: false,
       paperId: 0,
-      paperName: "",
-      opticList: [],
-    };
+      paperName: '',
+      opticList: []
+    }
   },
   computed: {
-    ...mapGetters(["period"])
+    ...mapGetters(['period'])
   },
   created() {
-    this.paperId = this.$route.query.paperId;
-    this.paperName = this.$route.query.paperName;
+    this.paperId = this.$route.query.paperId
+    this.paperName = this.$route.query.paperName
     isCollected({ paperId: this.paperId }).then((res) => {
-      console.log(res);
-      this.collectFlag = res.data;
-    });
-    this.getOptics();
+      console.log(res)
+      this.collectFlag = res.data
+    })
+    this.getOptics()
   },
   methods: {
     getOptics() {
       preview({ paperId: this.paperId }).then((res) => {
-        console.log(res);
-        this.opticList = res.data;
+        this.opticList = res.data
         this.$nextTick(_ => this.mxGlobal.MathQueue('question_list'))
-      });
+      })
     },
-    handle(index) {
-      if (this.opticList[index].updateTime) {
-        this.opticList[index].updateTime = false;
-      } else {
-        this.opticList[index].updateTime = true;
-      }
-
-      console.log(this.opticList[index].updateTime);
+    async handleParseVisible(item) {
+      item.updateTime = !item.updateTime
+      const parseEl = `question_parse_${item.id}`
+      this.$nextTick(_ => this.mxGlobal.MathQueue(parseEl))
     },
     toCollectQue(item) {
       queCollect({ questionId: item.id }).then((res) => {
-        item.collect = !item.collect;
-        this.msgSuccess("收藏成功");
-        console.log(res);
-      });
+        item.collect = !item.collect
+        this.msgSuccess('收藏成功')
+        console.log(res)
+      })
     },
     toCancelCollectQue(item) {
       queCancelCollect({ questionId: item.id }).then((res) => {
-        item.collect = !item.collect;
-        this.msgSuccess("取消收藏成功");
-        console.log(res);
-      });
+        item.collect = !item.collect
+        this.msgSuccess('取消收藏成功')
+        console.log(res)
+      })
     },
     cancelCollect() {
       papersCancelCollect({ paperId: this.paperId }).then((res) => {
-        this.collectFlag = false;
-        this.msgSuccess("取消收藏成功");
-      });
+        this.collectFlag = false
+        this.msgSuccess('取消收藏成功')
+      })
     },
     Collect() {
       papersCollect({ paperId: this.paperId }).then((res) => {
-        this.collectFlag = true;
-        this.msgSuccess("收藏成功");
-      });
+        this.collectFlag = true
+        this.msgSuccess('收藏成功')
+      })
     },
     paperDownLoad(paperId) {
       downloadRealPaper(paperId, this.period)
-    },
-  },
-};
+    }
+  }
+}
 </script>
 <style scoped>
 .preview_container {
   padding: 20px;
 }
+
 .paper_header {
   overflow: hidden;
   margin-bottom: 33px;
 }
+
 .paper_title {
   height: 25px;
   font-size: 18px;
@@ -169,9 +168,11 @@ export default {
   line-height: 25px;
   float: left;
 }
+
 .operation {
   float: right;
 }
+
 .shoucan {
   display: flex;
   align-items: center;
@@ -180,16 +181,19 @@ export default {
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
 }
+
 .shoucan img {
   margin-right: 6px;
   cursor: pointer;
 }
+
 .shoucan .sc_text {
   color: #9f9f9f;
   line-height: 20px;
   cursor: pointer;
   margin-right: 28px;
 }
+
 .shoucan .btn {
   padding: 6px 20px;
   cursor: pointer;
@@ -197,11 +201,13 @@ export default {
   color: white;
   border-radius: 4px;
 }
+
 .que_item {
   border-radius: 1px;
   border: 1px solid #dedede;
   margin-bottom: 8px;
 }
+
 .que_content {
   padding: 12px 24px 0 33px;
   font-size: 14px;
@@ -211,6 +217,7 @@ export default {
   line-height: 27px;
   margin-bottom: 10px;
 }
+
 .options {
   padding-left: 36px;
   font-size: 14px;
@@ -220,9 +227,11 @@ export default {
   line-height: 27px;
   border-bottom: 1px solid #dedede;
 }
+
 .options .option {
   margin-bottom: 10px;
 }
+
 .que_footer {
   border-top: 1px solid #dedede;
   padding-left: 33px;
@@ -230,6 +239,7 @@ export default {
   padding-bottom: 23px;
   padding-top: 21px;
 }
+
 .que_footer .spans {
   float: left;
   font-size: 12px;
@@ -238,9 +248,11 @@ export default {
   color: #979797;
   line-height: 20px;
 }
+
 .que_footer .spans > span {
   margin-right: 20px;
 }
+
 .operation {
   display: flex;
   align-items: center;
@@ -250,39 +262,48 @@ export default {
   color: #47c6a2;
   line-height: 20px;
 }
+
 .operation > div {
   display: flex;
   align-items: center;
   cursor: pointer;
 }
+
 .operation .shoucan {
   margin-right: 46px;
 }
+
 .operation .detail span {
   border-radius: 1px;
   border-bottom: 1px solid #47c6a2;
 }
+
 .operation .detail {
   margin-right: 32px;
 }
+
 .operation > div > img {
   margin-right: 10px;
 }
+
 .operation .addQue {
   padding: 7px;
   border-radius: 4px;
   border: 1px solid #979797;
   margin-right: 24px;
 }
+
 .info {
   padding: 12px 40px;
 }
+
 .option-list {
   display: flex;
   flex-direction: column;
   margin-bottom: 40px;
   font-size: 14px;
 }
+
 .option-list span {
   padding: 5px 40px;
   clear: both;
@@ -291,6 +312,7 @@ export default {
 .subQueBox {
   padding: 5px 40px;
 }
+
 .subQueBox .subQueItem {
   margin-bottom: 10px;
   font-size: 14px;