From ca22cdd5550cfa0defb0f430c538698182cdaec1 Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期一, 30 十二月 2024 16:42:49 +0800
Subject: [PATCH] Merge branch 'master' of http://dlindusit.com:53929/r/iailab-plat-ui-vue3
---
src/components/UploadFile/src/UploadImgs.vue | 23 +++++++++--------------
1 files changed, 9 insertions(+), 14 deletions(-)
diff --git a/src/components/UploadFile/src/UploadImgs.vue b/src/components/UploadFile/src/UploadImgs.vue
index 85da64c..59857a9 100644
--- a/src/components/UploadFile/src/UploadImgs.vue
+++ b/src/components/UploadFile/src/UploadImgs.vue
@@ -25,7 +25,7 @@
<template #file="{ file }">
<img :src="file.url" class="upload-image" />
<div class="upload-handle" @click.stop>
- <div class="handle-icon" @click="handlePictureCardPreview(file)">
+ <div class="handle-icon" @click="imagePreview(file.url!)">
<Icon icon="ep:zoom-in" />
<span>查看</span>
</div>
@@ -39,16 +39,12 @@
<div class="el-upload__tip">
<slot name="tip"></slot>
</div>
- <el-image-viewer
- v-if="imgViewVisible"
- :url-list="[viewImageUrl]"
- @close="imgViewVisible = false"
- />
</div>
</template>
<script lang="ts" setup>
import type { UploadFile, UploadProps, UploadUserFile } from 'element-plus'
import { ElNotification } from 'element-plus'
+import { createImageViewer } from '@/components/ImageViewer'
import { propTypes } from '@/utils/propTypes'
import { useUpload } from '@/components/UploadFile/src/useUpload'
@@ -56,6 +52,13 @@
defineOptions({ name: 'UploadImgs' })
const message = useMessage() // 消息弹窗
+// 查看图片
+const imagePreview = (imgUrl: string) => {
+ createImageViewer({
+ zIndex: 9999999,
+ urlList: [imgUrl]
+ })
+}
type FileTypes =
| 'image/apng'
@@ -177,14 +180,6 @@
message: `当前最多只能上传 ${props.limit} 张图片，请移除后上传！`,
type: 'warning'
})
-}
-
-// 图片预览
-const viewImageUrl = ref('')
-const imgViewVisible = ref(false)
-const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
- viewImageUrl.value = uploadFile.url!
- imgViewVisible.value = true
}
</script>
--
Gitblit v1.9.3