Browse Source

🐞 fix(【SPD售后问题收集】): SPD小程序图片预览问题。

vant图片预览组件与el-drawer层级遮挡,el-drawer会随着打开次数增加层级,解决办法:改为el的图片预览

20240712107
002390 11 months ago
parent
commit
d85ba12992
1 changed files with 21 additions and 12 deletions
  1. 21 12
      src/views/business/as/after-sales/components/image-preview/index.vue

+ 21 - 12
src/views/business/as/after-sales/components/image-preview/index.vue

@@ -14,10 +14,11 @@ export default {
     fileList: {
       get() {
         return this.$props.value.map((item) => {
-          return {
-            ...item,
-            url: item.filepath,
-          };
+          return item.filepath;
+          // return {
+          //   ...item,
+          //   url: item.filepath,
+          // };
         });
       },
       set() {},
@@ -28,6 +29,9 @@ export default {
       console.log(file, "file");
     },
     useDelete() {},
+    expressImgPreview() {},
+    onClose() {},
+    onSwitch() {},
   },
   created() {},
 };
@@ -35,17 +39,22 @@ export default {
 
 <template>
   <div class="preview-image">
-    <van-uploader
+    <template v-for="(img, index) in fileList">
+      <el-image
+        :key="index"
+        :src="fileList[index]"
+        :preview-src-list="fileList"
+        :initial-index="index"
+        style="width: 60px; height: 60px; margin: 0 10px 5px 0"
+      >
+      </el-image>
+    </template>
+
+    <!-- <van-uploader
       v-model="fileList"
       preview-size="60px"
       :deletable="false"
       readonly
-    />
+    /> -->
   </div>
 </template>
-
-<style scoped>
-.van-image-preview {
-  z-index: 2024;
-}
-</style>