From 7bc15245aa48e743ad42fbe5d53582a90cd450cf Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期六, 01 一月 2022 09:46:18 +0800
Subject: [PATCH] 预览组件支持多图显示
---
ruoyi-ui/src/components/ImagePreview/index.vue | 121 +++++++++++++++++++++++-----------------
1 files changed, 69 insertions(+), 52 deletions(-)
diff --git a/ruoyi-ui/src/components/ImagePreview/index.vue b/ruoyi-ui/src/components/ImagePreview/index.vue
index 44e27aa..743d8d5 100644
--- a/ruoyi-ui/src/components/ImagePreview/index.vue
+++ b/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}`]">
- <div slot="error" class="image-slot">
- <i class="el-icon-picture-outline"></i>
- </div>
- </el-image>
+ <el-image
+ :src="`${realSrc}`"
+ fit="cover"
+ :style="`width:${realWidth};height:${realHeight};`"
+ :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',
- props: {
- src: {
- type: String,
- required: true
- },
- width: {
- type: [Number, String],
- default: ''
- },
- height: {
- type: [Number, String],
- default: ''
- }
+ name: "ImagePreview",
+ props: {
+ src: {
+ type: String,
+ required: true
},
- computed: {
- realSrc() {
- if (isExternal(this.src)) {
- return this.src
- }
- return process.env.VUE_APP_BASE_API + this.src
- },
- realWidth() {
- return typeof this.width == 'string' ? this.width : `${this.width}px`
- },
- realHeight() {
- return typeof this.height == 'string' ? this.height : `${this.height}px`
- }
+ width: {
+ type: [Number, String],
+ default: ""
+ },
+ height: {
+ type: [Number, String],
+ default: ""
}
-}
+ },
+ 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;
- background-color: #ebeef5;
- box-shadow: 0 0 5px 1px #ccc;
- ::v-deep .el-image__inner {
- transition: all 0.3s;
- cursor: pointer;
- &:hover {
- transform: scale(1.2);
- }
+ border-radius: 5px;
+ background-color: #ebeef5;
+ box-shadow: 0 0 5px 1px #ccc;
+ ::v-deep .el-image__inner {
+ transition: all 0.3s;
+ cursor: pointer;
+ &:hover {
+ 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>
--
Gitblit v1.9.2