From 7c2cdcbc7f5585b96fba76a07b0e4417a09c4d7e Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 02 六月 2026 11:06:10 +0800
Subject: [PATCH] 新疆马铃薯 1.过程检验下载添加3个模版
---
src/components/AttachmentPreview/image/index.vue | 76 ++++++++++++++++++++++++++++++++++++++
1 files changed, 76 insertions(+), 0 deletions(-)
diff --git a/src/components/AttachmentPreview/image/index.vue b/src/components/AttachmentPreview/image/index.vue
new file mode 100644
index 0000000..1c6039b
--- /dev/null
+++ b/src/components/AttachmentPreview/image/index.vue
@@ -0,0 +1,76 @@
+<script setup>
+const props = defineProps({
+ fileList: {
+ type: Array,
+ default: () => [],
+ },
+ thumbSize: {
+ type: Number,
+ default: 72,
+ },
+ gap: {
+ type: Number,
+ default: 10,
+ },
+})
+
+const normalizedList = computed(() => {
+ return (props.fileList || [])
+ .filter((item) => item && item.previewURL)
+ .map((item, index) => ({
+ id: item.id ?? index,
+ name: item.originalFilename || `image-${index + 1}`,
+ url: item.previewURL,
+ }))
+})
+const previewUrls = computed(() => normalizedList.value.map((item) => item.url))
+</script>
+
+<template>
+ <div class="attachment-image-preview">
+ <div v-if="!normalizedList.length" class="empty">鏆傛棤鍥剧墖</div>
+
+ <div v-else class="thumbs" :style="{ gap: `${gap}px` }">
+ <el-image
+ v-for="(item, index) in normalizedList"
+ :key="item.id"
+ class="thumb"
+ :style="{ width: `${thumbSize}px`, height: `${thumbSize}px` }"
+ :src="item.url"
+ :preview-src-list="previewUrls"
+ :initial-index="index"
+ fit="cover"
+ preview-teleported
+ />
+ </div>
+ </div>
+</template>
+
+<style scoped lang="scss">
+.attachment-image-preview {
+ width: 100%;
+}
+
+.empty {
+ height: 120px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--el-text-color-secondary);
+ border: 1px dashed var(--el-border-color);
+ border-radius: 8px;
+}
+
+.thumbs {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.thumb {
+ border: 1px solid var(--el-border-color);
+ border-radius: 6px;
+ overflow: hidden;
+ cursor: pointer;
+ background: #fff;
+}
+</style>
--
Gitblit v1.9.3