预览图片 只能关闭一个

src/views/checkList.vue

@@ -114,18 +114,21 @@
           <div class="peviewImg">
             <div class="OneImg">
               <el-image
+                id="imageOne"
                 class="OneElImg"
                 :src="url"
-                :append-to-body="false"
+                fit="full"
                 :preview-src-list="srcList"
+                @click.stop="handleClickStop"
               />
             </div>
             <div class="twoImg">
               <el-image
+                id="imageOne"
                 class="twoElImg"
-                :src="url1"
-                :append-to-body="true"
-                :preview-src-list="srcList1"
+                :src="url"
+                fit="full"
+                :preview-src-list="srcList"
               />
             </div>
             <div class="uploadButton">
@@ -152,6 +155,7 @@ export default {
   name: 'CheckList',
   data() {
     return {
+      dialogVisible: false,
       url: require('@/assets/image/cadone.png'),
       url1: require('@/assets/image/cadTwo.png'),
       srcList: [
@@ -271,15 +275,50 @@ export default {
     }
   },
   mounted() {
-    // 通过遮罩层关闭图片预览
-    document.addEventListener('click', function(e) {
-      if (e.target.className === 'el-image-viewer__mask') {
-        const close = document.querySelector('.el-icon-circle-close')
-        close.click()
+    this.$nextTick(() => {
+      var domImageView = document.querySelector('.el-image-viewer__mask') // 获取遮罩层dom
+      if (!domImageView) {
+        return
       }
+      domImageView.addEventListener('click', () => {
+        // 点击遮罩层时调用关闭按钮的 click 事件
+        document.querySelector('.el-image-viewer__close').click()
+      })
     })
   },
   methods: {
+    handleClickStop() {
+      this.$nextTick(() => {
+        document.addEventListener('click', function(e) {
+          console.log('e', e.target.className)
+          if (e.target.className === 'el-image-viewer__mask') {
+            const close = document.querySelector('.el-icon-circle-close')
+            console.log('close', close)
+            console.log('close', close.click())
+            close.click()
+          }
+        })
+      })
+    },
+    handleClickTwoStop() {
+      this.$nextTick(() => {
+        var domImageView = document.querySelector('.el-image-viewer__mask') // 获取遮罩层dom
+        console.log('domImageView', domImageView)
+        if (!domImageView) {
+          return
+        }
+        domImageView.addEventListener('click', () => {
+          // 点击遮罩层时调用关闭按钮的 click 事件
+          document.querySelector('.el-image-viewer__close').click()
+        })
+      })
+    },
+    closeDialog(event) {
+      // 如果点击的是遮罩层，则关闭弹窗
+      if (event.target.className === 'el-dialog__wrapper') {
+        this.dialogVisible = false
+      }
+    },
     handleRemove(file, fileList) {
       console.log(file, fileList)
     },
@@ -292,6 +331,13 @@ export default {
 
 <style scoped lang="scss">
 .CheckBobyList {
+  .el-dialog__wrapper {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .image-wrapper {
+    text-align: center;
+  }
+
   ::v-deep .el-form-item__content{
     margin-left: 45px !important;
   }