图片放大功能

src/components/Image/ImageZoom.vue

 <template>
-    <div class="pinch-zoom-container">
-        <img id="pinch-zoom-image-id" class="pinch-zoom-image"  :src="src">
+    <div class="pinch-zoom-container" @click="cloes_fun()">
+        <img id="pinch-zoom-image-id" class="pinch-zoom-image" @click.stop="cloes_fun(false)" :src="src">
     </div>
 </template>
   <script>
@@ -36,6 +36,11 @@
 
     },
     methods: {
+        cloes_fun(s=true){
+            if(s){
+                this.$emit('closeFun');
+            }
+        },
         disableImgEventHandlers() {
             var _that=this
             var events = ['onclick', 'onmousedown', 'onmousemove', 'onmouseout', 'onmouseover',

src/views/affirm/index.vue

@@ -7,9 +7,9 @@
  */
 </script><template>
   <el-card class="box-card">
-    <div class="bgd_container">
+    <!-- <div class="bgd_container">
       <img src="image/Vector.png" />
-    </div>
+    </div> -->
     <div v-if="test_results" class="text_item">
       {{ test_results.examination_questions.opening_tip }}
     </div>

src/views/analysis/index.vue

@@ -141,7 +141,16 @@
                       </el-col>
                       <el-col :span="24"><el-input type="textarea" :rows="3" v-model="detailed_information.note[e.id].note_info" placeholder="请填写要记录的内容" ></el-input></el-col>
                       <el-col :span="24" v-if="detailed_information.note[e.id].image" style="padding-top:10px">
-                        <img :src="IP+detailed_information.note[e.id].image" style="width: 80%;" alt="">
+                        <el-image
+                                style="width: 80%;"
+                                :src="IP+detailed_information.note[e.id].image"
+                                @click="
+                                  ImageZoomUrl = IP+detailed_information.note[e.id].image;
+                                  is_ImageZoom = true;
+                                "
+                              >
+                              </el-image>
+                        <!-- <img :src="IP+detailed_information.note[e.id].image" style="width: 80%;" alt=""> -->
                       </el-col>
                       <el-col :span="12" style="padding-top:10px">
                           <el-upload
@@ -222,7 +231,7 @@
       <div class="close_box" @click="is_ImageZoom = false">
         <i class="el-icon-close"></i>
       </div>
-      <ImageZoom :src="ImageZoomUrl"></ImageZoom>
+      <ImageZoom :src="ImageZoomUrl" @closeFun='closeFun'></ImageZoom>
     </div>
   </div>
 </template>
@@ -298,6 +307,9 @@ export default {
   },
 
   methods: {
+    closeFun(){
+      this.is_ImageZoom=false
+    },
     uploadSubmit(file, fileList) {
       if (file && (file.status == 'success' || file.status == 'error')) {
         this.node_is_loading = false;