From fa60bfa07970c192c85a437e7db784eccdae2839 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期一, 16 六月 2025 20:04:15 +0800
Subject: [PATCH] 修改bug
---
laboratory/src/components/DynamicComponent/index.vue | 27 ++++++++++++++++++++++++---
1 files changed, 24 insertions(+), 3 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/index.vue b/laboratory/src/components/DynamicComponent/index.vue
index 8faa19a..7a1ff5e 100644
--- a/laboratory/src/components/DynamicComponent/index.vue
+++ b/laboratory/src/components/DynamicComponent/index.vue
@@ -72,14 +72,22 @@
<div class="image-upload-container">
<el-upload v-if="editable" action="#" :file-list="item.data.imageList"
:on-change="(file, fileList) => handleImageChange(idx, fileList)"
- :on-success="(res, file, fileList) => handleImageSuccess(res, file, fileList, idx)" :auto-upload="true"
- :http-request="() => { }" :before-upload="beforeImageUpload" list-type="picture-card"
+ :on-success="(res, file, fileList) => handleImageSuccess(res, file, fileList, idx)"
+ :auto-upload="true"
+ :http-request="() => { }"
+ :before-upload="beforeImageUpload"
+ list-type="picture-card"
+ :on-preview="(file) => handlePreview(file, idx)"
class="image-uploader">
<i class="el-icon-plus"></i>
<div class="upload-text">上传图片</div>
</el-upload>
<div v-else class="image-preview">
- <img v-for="image in item.data.imageList" :key="image.uid" :src="image.url" class="preview-image" />
+ <el-image v-for="image in item.data.imageList"
+ :key="image.uid"
+ :src="image.url"
+ :preview-src-list="item.data.imageList.map(img => img.url)"
+ class="preview-image" />
</div>
<div class="uploaf-notice">支持.jpg .png格式</div>
</div>
@@ -95,6 +103,10 @@
<addTableData :visible.sync="rowDialog.visible" :headerList="rowDialog.headers"
:editData="rowDialog.form" :isEdit="rowDialog.isEdit" @success="confirmAddRow">
</addTableData>
+
+ <el-dialog :visible.sync="imagePreviewVisible" width="auto" top="10vh" :show-close="true" v-if="imagePreviewUrl">
+ <img :src="imagePreviewUrl" style="max-width:80vw;max-height:70vh;display:block;margin:auto;" />
+ </el-dialog>
</div>
</template>
@@ -155,6 +167,8 @@
},
headerList: [],
defaultImageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 默认图片地址
+ imagePreviewVisible: false,
+ imagePreviewUrl: '',
};
},
watch: {
@@ -469,6 +483,13 @@
}
return true;
},
+ handlePreview(file, idx) {
+ // 使用el-image的preview-src-list实现预览
+ // 这里直接用Element的图片预览能力，实际上el-upload会自动处理
+ // 但如果你想自定义弹窗，可以用如下代码：
+ this.imagePreviewUrl = file.url;
+ this.imagePreviewVisible = true;
+ },
emitUpdate() {
// 先创建新对象，这有助于触发更新
const updatedComponents = JSON.parse(JSON.stringify(this.components));
--
Gitblit v1.7.1