预览组件支持多图显示

src/components/ImagePreview/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <el-image :src="`${realSrc}`" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[`${realSrc}`]">
+  <el-image
+    :src="`${realSrc}`"
+    fit="cover"
+    :style="`width:${realWidth};height:${realHeight};`"
+    :preview-src-list="realSrcList"
+  >
     <template #error>
       <div class="image-slot">
         <el-icon><picture-filled /></el-icon>
@@ -9,7 +14,7 @@
 </template>
 
 <script setup>
-import { isExternal } from '@/utils/validate'
+import { isExternal } from "@/utils/validate";
 
 const props = defineProps({
   src: {
@@ -18,50 +23,63 @@ const props = defineProps({
   },
   width: {
     type: [Number, String],
-    default: ''
+    default: ""
   },
   height: {
     type: [Number, String],
-    default: ''
+    default: ""
   }
 });
 
 const realSrc = computed(() => {
-  if (isExternal(props.src)) {
+  let real_src = props.src.split(",")[0];
-    return props.src
+  if (isExternal(real_src)) {
+    return real_src;
   }
-  return import.meta.env.VITE_APP_BASE_API + props.src
+  return import.meta.env.VITE_APP_BASE_API + real_src;
-})
+});
+
+const realSrcList = computed(() => {
+  let real_src_list = props.src.split(",");
+  let srcList = [];
+  real_src_list.forEach(item => {
+    if (isExternal(item)) {
+      return srcList.push(item);
+    }
+    return srcList.push(import.meta.env.VITE_APP_BASE_API + item);
+  });
+  return srcList;
+});
 
-const realWidth = computed(
+const realWidth = computed(() =>
-  () => typeof props.width == 'string' ? props.width : `${props.width}px`
+  typeof props.width == "string" ? props.width : `${props.width}px`
 );
 
-const realHeight = computed(
+const realHeight = computed(() =>
-  () => typeof props.height == 'string' ? props.height : `${props.height}px`
+  typeof props.height == "string" ? props.height : `${props.height}px`
 );
 </script>
 
 <style lang="scss" scoped>
 .el-image {
-    border-radius: 5px;
+  border-radius: 5px;
-    background-color: #ebeef5;
+  background-color: #ebeef5;
-    box-shadow: 0 0 5px 1px #ccc;
+  box-shadow: 0 0 5px 1px #ccc;
-    :deep(.el-image__inner) {
+  :deep(.el-image__inner) {
-        transition: all 0.3s;
+    transition: all 0.3s;
-        cursor: pointer;
+    cursor: pointer;
-        &:hover {
+    &:hover {
-            transform: scale(1.2);
+      transform: scale(1.2);
-        }
-    }
-    :deep(.image-slot) {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        color: #909399;
-        font-size: 30px;
     }
+  }
+  :deep(.image-slot) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #909399;
+    font-size: 30px;
+  }
 }
 </style>