diff --git a/apps/web-antd/src/components/upload/src/hook.ts b/apps/web-antd/src/components/upload/src/hook.ts index ae9ab8ca..327d43e9 100644 --- a/apps/web-antd/src/components/upload/src/hook.ts +++ b/apps/web-antd/src/components/upload/src/hook.ts @@ -44,12 +44,9 @@ export function useImagePreview() { const previewVisible = ref(false); // 预览的图片 url/base64 const previewImage = ref(''); - // 预览的图片名称 - const previewTitle = ref(''); - function handleCancel() { - previewVisible.value = false; - previewTitle.value = ''; + function handleOpenChange(isOpen: boolean) { + previewVisible.value = isOpen; } async function handlePreview(file: UploadFile) { @@ -64,16 +61,21 @@ export function useImagePreview() { const url = file.url ?? ''; previewImage.value = url || file.preview || ''; previewVisible.value = true; - previewTitle.value = - file.name || url.slice(Math.max(0, url.lastIndexOf('/') + 1)); + } + + function handleAfterOpenChange(open: boolean) { + if (!open) { + previewVisible.value = false; + previewImage.value = ''; + } } return { previewVisible, previewImage, - previewTitle, - handleCancel, + handleOpenChange, handlePreview, + handleAfterOpenChange, }; } diff --git a/apps/web-antd/src/components/upload/src/image-upload.vue b/apps/web-antd/src/components/upload/src/image-upload.vue index 8e60de66..a40da046 100644 --- a/apps/web-antd/src/components/upload/src/image-upload.vue +++ b/apps/web-antd/src/components/upload/src/image-upload.vue @@ -10,7 +10,7 @@ import type { BaseUploadProps, UploadEmits } from './props'; import { $t, I18nT } from '@vben/locales'; import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue'; -import { Image, ImagePreviewGroup, Upload } from 'antdv-next'; +import { Image, Upload } from 'antdv-next'; import { isFunction } from 'lodash-es'; import { uploadApi } from '#/api'; @@ -65,8 +65,13 @@ const { customRequest, } = useUpload(props, emit, ossIdList, 'image'); -const { previewVisible, previewImage, handleCancel, handlePreview } = - useImagePreview(); +const { + previewVisible, + previewImage, + handleOpenChange, + handlePreview, + handleAfterOpenChange, +} = useImagePreview(); function currentPreview(file: UploadFile) { // 有自定义预览逻辑走自定义 @@ -141,14 +146,16 @@ function currentPreview(file: UploadFile) { - + />