预览组件支持多图显示

ruoyi-ui/src/components/ImagePreview/index.vue

@@ -1,67 +1,84 @@
 <template>
-    <el-image :src="`${realSrc}`" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[`${realSrc}`]">
+  <el-image
-        <div slot="error" class="image-slot">
+    :src="`${realSrc}`"
-          <i class="el-icon-picture-outline"></i>
+    fit="cover"
-        </div>
+    :style="`width:${realWidth};height:${realHeight};`"
-    </el-image>
+    :preview-src-list="realSrcList"
+  >
+    <div slot="error" class="image-slot">
+      <i class="el-icon-picture-outline"></i>
+    </div>
+  </el-image>
 </template>
 
 <script>
-import { isExternal } from '@/utils/validate'
+import { isExternal } from "@/utils/validate";
 
 export default {
-    name: 'ImagePreview',
+  name: "ImagePreview",
-    props: {
+  props: {
-        src: {
+    src: {
-            type: String,
+      type: String,
-            required: true
+      required: true
-        },
-        width: {
-            type: [Number, String],
-            default: ''
-        },
-        height: {
-            type: [Number, String],
-            default: ''
-        }
     },
-    computed: {
+    width: {
-        realSrc() {
+      type: [Number, String],
-            if (isExternal(this.src)) {
+      default: ""
-                return this.src
+    },
-            }
+    height: {
-            return process.env.VUE_APP_BASE_API + this.src
+      type: [Number, String],
-        },
+      default: ""
-        realWidth() {
-            return typeof this.width == 'string' ? this.width : `${this.width}px`
-        },
-        realHeight() {
-            return typeof this.height == 'string' ? this.height : `${this.height}px`
-        }
     }
-}
+  },
+  computed: {
+    realSrc() {
+      let real_src = this.src.split(",")[0];
+      if (isExternal(real_src)) {
+        return real_src;
+      }
+      return process.env.VUE_APP_BASE_API + real_src;
+    },
+    realSrcList() {
+      let real_src_list = this.src.split(",");
+      let srcList = [];
+      real_src_list.forEach(item => {
+        if (isExternal(item)) {
+          return srcList.push(item);
+        }
+        return srcList.push(process.env.VUE_APP_BASE_API + item);
+      });
+      return srcList;
+    },
+    realWidth() {
+      return typeof this.width == "string" ? this.width : `${this.width}px`;
+    },
+    realHeight() {
+      return typeof this.height == "string" ? this.height : `${this.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;
-    ::v-deep .el-image__inner {
+  ::v-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);
-        }
-    }
-    ::v-deep .image-slot {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        color: #909399;
-        font-size: 30px;
     }
+  }
+  ::v-deep .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #909399;
+    font-size: 30px;
+  }
 }
 </style>