预览组件支持多图显示

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,27 +23,40 @@ 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>