放大照片

src/views/modules/visual/shundeju/screen-table.vue

@@ -31,17 +31,13 @@
             :style="tableContentStyle[indexs]"
           >
             <div v-if="item.coulmn == 'faceImg'">
-              <!-- <img
+              <img
                 :src= "value[item.coulmn]"
                 alt=""
                 srcset=""
                 style="width: 40px;height: 40px;"
-              /> -->
+                @click="clickItem(value[item.coulmn])"
-              <el-image style="width: 40px;height: 40px;"
+              />
-                        :src="value[item.coulmn]"
-                        :preview-src-list="previewImgList"
-                        @click="clickImg(value[item.coulmn])">
-              </el-image>
             </div>
             <div v-else>
               {{ value[item.coulmn] }}
@@ -71,6 +67,10 @@
         </div>
       </div>
     </div>
+    <div class="preview" v-if="showImg">
+      <img class="close-img" src="../../../../assets/img/plugins/close.png" @click="closePreview">
+      <img class="show-img" :src="imgUrl" alt="预览失败">
+    </div>
   </div>
 </template>
 
@@ -186,7 +186,8 @@ export default {
         false,
         false,
       ],
-      previewImgList: []
+      showImg: false,
+      imgUrl:''
     };
   },
   watch: {
@@ -222,10 +223,14 @@ export default {
     handleClickRow(val) {
       this.$emit('row', val)
     },
-    clickImg (url) {
+    clickItem (url) {
-      this.previewImgList = []
+      this.imgUrl = url
-      this.previewImgList.push(url)
+      this.showImg = true
-    }
+    },
+    closePreview () {
+      this.imgUrl = ''
+      this.showImg = false
+    },
   },
 };
 </script>
@@ -353,4 +358,28 @@ export default {
     }
   }
 }
+.preview {
+    position: fixed;
+    z-index: 999;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .close-img {
+      cursor: pointer;
+      position: absolute;
+      z-index: 1000;
+      top: 10%;
+      right: 10%;
+    }
+    .show-img {
+      width: 70%;
+      height: 70%;
+      object-fit: contain;
+    }
+  }
 </style>