Procházet zdrojové kódy

fix:修复图片预览闪烁问题

luoxiao před 3 týdny
rodič
revize
51ec07fb97
1 změnil soubory, kde provedl 18 přidání a 2 odebrání
  1. 18 2
      src/views/messages/MessageDetail.vue

+ 18 - 2
src/views/messages/MessageDetail.vue

@@ -26,12 +26,15 @@
           <el-image
             v-for="(item, index) in messageObj.photoLists"
             :key="index"
-            :initial-index="index"
-            :preview-src-list="messageObj.photoLists"
             :src="item"
+            :preview-src-list="messageObj.photoLists"
+            :initial-index="index"
             class="gallery-image"
             fit="cover"
             lazy
+            hide-on-click-modal
+            append-to-body
+            preview-teleported
           />
         </div>
 
@@ -179,4 +182,17 @@ defineExpose({ handleOpenDrawer, handleCloseDrawer });
 .el-divider {
   margin: 28px 0;
 }
+
+/* 修复预览层闪烁问题 */
+.el-image-viewer__wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000 !important; /* 确保高于抽屉组件的z-index */
+}
+
+/* 防止背景滚动 */
+.el-image-viewer__mask {
+  opacity: 0.9 !important;
+}
 </style>