预览图片 只能关闭一个

src/views/checkList.vue

@@ -112,24 +112,22 @@
         <div class="uploadLabel">附件:</div>
         <div class="uploadImg">
           <div class="peviewImg">
-            <div class="OneImg">
+            <div class="OneImg" id="imageOne">
               <el-image
-                id="imageOne"
                 class="OneElImg"
                 :src="url"
                 fit="full"
                 :preview-src-list="srcList"
-                @click.stop="clickMaskClosePreview"
+                @click.stop="handleClickOneStop"
               />
             </div>
-            <div class="twoImg">
+            <div class="twoImg" id="imageTwo">
               <el-image
-                id="imageOne"
                 class="twoElImg"
-                :src="url"
+                :src="url1"
                 fit="full"
-                :preview-src-list="srcList"
-                @click.stop="clickMaskClosePreview"
+                :preview-src-list="srcList1"
+                @click.stop="handleClickTwoStop"
               />
             </div>
             <div class="uploadButton">
@@ -143,6 +141,24 @@
           </div>
         </div>
       </div>
+      <!--      <el-upload-->
+      <!--        :action="upload.url + '?updateSupport=' + upload.updateSupport"-->
+      <!--        list-type="picture-card"-->
+      <!--        :on-preview="handlePictureCardPreview"-->
+      <!--        :on-remove="handleRemoveImg"-->
+      <!--        :on-success="uploadSuccess"-->
+      <!--        :file-list="imgFileList"-->
+      <!--      >-->
+      <!--        <i class="el-icon-plus" />-->
+      <!--      </el-upload>-->
+      <!--      &lt;!&ndash; 大图预览 &ndash;&gt;-->
+      <!--      <el-image-viewer-->
+      <!--        v-if="showImgViewer"-->
+      <!--        :on-close="closeImgViewer"-->
+      <!--        :url-list="imagePreviewUrls"-->
+      <!--        :z-index="9999"-->
+      <!--        :initial-index="initialImgPreviewIndex"-->
+      <!--      />-->
       <!--      &lt;!&ndash;   提交按钮   &ndash;&gt;-->
       <div class="submitButton">
         <el-button class="buttoon" type="primary">提交</el-button>
@@ -152,10 +168,31 @@
 </template>
 
 <script>
+import { getToken } from '@/utils/auth'
+
 export default {
   name: 'CheckList',
   data() {
     return {
+      initialImgPreviewIndex: 0, // 预览打开看到的图片下标
+      showImgViewer: false,
+      imgFileList: [],
+      imagePreviewUrls: [], // 预览图片的下标
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: '',
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: 'Bearer ' + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + '/system/user/importExcel'
+      },
       dialogVisible: false,
       url: require('@/assets/image/cadone.png'),
       url1: require('@/assets/image/cadTwo.png'),
@@ -276,24 +313,57 @@ export default {
     }
   },
   methods: {
+    handlePictureCardPreview(file) {
+      const index = this.imagePreviewUrls.indexOf(file.url)
+      if (index >= 0) {
+        this.initialImgPreviewIndex = index
+      }
+      this.showImgViewer = true
+    },
+    closeImgViewer() {
+      this.showImgViewer = false
+    },
+    uploadSuccess(file, fileList) {
+      if (fileList.status === 'success') {
+        this.imagePreviewUrls.push(fileList.url) // 预览图片的数组
+      }
+    },
+    // 删除选中的文件
+    handleRemoveImg(file) {
+      // 删除预览数组对应的图片
+      const index = this.imagePreviewUrls.indexOf(file.url)
+      if (index > -1) {
+        this.imagePreviewUrls.splice(index, 1)
+      }
+      // 执行删除
+    },
     // 点击mask关闭图片预览
     clickMaskClosePreview(e) {
       // 使用addEventListener,会出现点击点击两次才触发的情况
       if (e.target.getAttribute('class') === 'el-image-viewer__mask') {
-        this.$refs.preview.showViewer = false
-        // this.imgPreviewShow = false
+        // this.$refs.preview.showViewer = false
+        document.querySelector('.el-image-viewer__close').click()
+      }
+    },
+    handleClickOneStop() {
+      this.$nextTick(() => {
+        var domImageView = document.querySelector('#imageOne .el-image-viewer__mask')
+        if (!domImageView) {
+          return
         }
+        domImageView.addEventListener('click', () => {
+          document.querySelector('#imageOne .el-image-viewer__close').click()
+        })
+      })
     },
     handleClickTwoStop() {
       this.$nextTick(() => {
-        var domImageView = document.querySelector('.el-image-viewer__mask') // 获取遮罩层dom
-        console.log('domImageView', domImageView)
+        var domImageView = document.querySelector('#imageTwo .el-image-viewer__mask')
         if (!domImageView) {
           return
         }
         domImageView.addEventListener('click', () => {
-          // 点击遮罩层时调用关闭按钮的 click 事件
-          document.querySelector('.el-image-viewer__close').click()
+          document.querySelector('#imageTwo .el-image-viewer__close').click()
         })
       })
     },
@@ -739,7 +809,7 @@ export default {
       }
       .uploadLabel {
         margin-top: 7px;
-        width: 3%;
+        //width: 3%;
         height: 18px;
         font-size: 14px;
         font-family: Microsoft YaHei, Microsoft YaHei-400;

src/views/inspectionSheet.vue

@@ -319,18 +319,20 @@
         </div>
       </div>
       <div class="sivOneTest">标准</div>
-      <div class="oneCadImg">
+      <div class="oneCadImg" id="imageOne">
         <el-image
           class="oneCadImgContent"
           :src="url"
           :preview-src-list="srcList"
+          @click.stop="handleClickOneStop"
         />
       </div>
-      <div class="twoCadImg">
+      <div class="twoCadImg" id="imageTwo">
         <el-image
           class="oneCadImgContent"
           :src="url1"
           :preview-src-list="srcList1"
+          @click.stop="handleClickTwoStop"
         />
       </div>
     </div>
@@ -379,7 +381,30 @@ export default {
       }
     }
   },
-  methods: {}
+  methods: {
+    handleClickOneStop() {
+      this.$nextTick(() => {
+        var domImageView = document.querySelector('#imageOne .el-image-viewer__mask')
+        if (!domImageView) {
+          return
+        }
+        domImageView.addEventListener('click', () => {
+          document.querySelector('#imageOne .el-image-viewer__close').click()
+        })
+      })
+    },
+    handleClickTwoStop() {
+      this.$nextTick(() => {
+        var domImageView = document.querySelector('#imageTwo .el-image-viewer__mask')
+        if (!domImageView) {
+          return
+        }
+        domImageView.addEventListener('click', () => {
+          document.querySelector('#imageTwo .el-image-viewer__close').click()
+        })
+      })
+    }
+  }
 
 }
 </script>