From 4189bdd8e6370f4c088c56a2fa926b342292525f Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 1 Mar 2022 10:24:34 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E6=88=90=E5=9B=BE=E7=89=87=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E6=94=BE=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/codemirror.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/codemirror.vue b/src/components/codemirror.vue
index 988df0c..dc2d8d8 100644
--- a/src/components/codemirror.vue
+++ b/src/components/codemirror.vue
@@ -20,8 +20,11 @@
       <p class="text-wrapper">{{ runResult }}</p>
       <div class="pic-wrap" v-if="picSrcList.length">
         <div class="pic-item" v-for="(img, i) in picSrcList" :key="i">
-          <!-- <img class="pic" :src="picSrc" alt=""> -->
-          <img class="pic" :src="img" alt="">
+          <el-image 
+            class="pic"
+            :src="img" 
+            :preview-src-list="picSrcList">
+          </el-image>
           <el-button class="download-btn btn" type="primary" size="mini" @click="downloadPic(i)">下载图片</el-button>
           <a :ref="'picLink' + i" style="display: none;" download="运行结果.png" :href="img">下载图片</a>
         </div>
@@ -109,7 +112,6 @@ export default {
       isSubmit: false, // 是否提交了
       runEnable: false, // 是否禁用运行按钮
       tipsVisible: false, // 答案提示弹框显示标识
-      picSrc: '', // 代码运行出来的图片url
       picSrcList: [],
       loadIns: null, // loading实例
       cmOption: {
@@ -308,7 +310,6 @@ export default {
               const result = data.runResult
               this.$emit('cache') // 每次运行代码都要把代码传给后端做缓存
               this.loadIns.close()
-              // this.picSrc = ''
               if (photo) this.picSrcList = photo.split(',')
               this.$emit('update:codeId', res.codeId) // 更新coddeId
               this.$emit('update:answer', result) // 更新运行结果
@@ -324,8 +325,7 @@ export default {
                 this.isError = '' // 对错隐藏
                 const text = result.replace(photo, '') // 结果里包含了图片路径，所以要把图片路径给去掉
                 this.runResult = text
-                // this.picSrc = photo
-                if (photo) this.picSrcList = photo.split(',')
+                this.picSrcList = photo.split(',')
               } else if (imgList instanceof Array && imgList.length && typeof firtImg === 'string' && (firtImg.includes('.jpg') || firtImg.includes('.png') || firtImg.includes('img'))) {
                 /**
                  * 这段是为要下载图片的项目案例写的，后端会返回图片名称的数组，前端负责循环这个数组，然后下载下来
@@ -487,13 +487,17 @@ export default {
   right: 0;
   bottom: 5px;
   display: flex;
-  // justify-content: center;
   max-width: calc(100% - 50px);
   margin: 0 auto;
   text-align: center;
   overflow: auto;
   .pic-item {
     margin: 0 5px 5px;
+    &:only-child {
+      .pic {
+        width: 80%;
+      }
+    }
   }
   .pic {
     display: block;