From 68e500b259922de8890ef652dcaed6782b9bf721 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Tue, 9 Jul 2024 00:49:50 +0800 Subject: [PATCH] feat(upload): `on-preview` prop adds `detail.event` parameter, closes #6036] --- CHANGELOG.en-US.md | 3 ++- CHANGELOG.zh-CN.md | 1 + src/upload/demos/enUS/index.demo-entry.md | 2 +- src/upload/demos/zhCN/index.demo-entry.md | 2 +- src/upload/src/UploadFile.tsx | 5 +++-- src/upload/src/interface.ts | 7 ++++++- 6 files changed, 14 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index bfad452d5..9e4adfde5 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -14,7 +14,8 @@ - `n-data-table` adds `filter-icon-popover-props` prop, closes [#6111](https://github.com/tusen-ai/naive-ui/issues/6111) - `n-input-number` adds `round` prop, closes [#6097](https://github.com/tusen-ai/naive-ui/issues/6097). -- `n-color-picker` add `on-clear` props +- `n-color-picker` add `on-clear` props. +- `n-upload`'s `on-preview` prop adds `detail.event` parameter, closes [#6036](https://github.com/tusen-ai/naive-ui/issues/6036). ## 2.38.2 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index a2518635d..5f8bc7b68 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,7 @@ - `n-data-table` 新增 `filter-icon-popover-props` 属性，关闭 [#6111](https://github.com/tusen-ai/naive-ui/issues/6111) - `n-input-number` 新增 `round` 属性，关闭 [#6097](https://github.com/tusen-ai/naive-ui/issues/6097) - `n-color-picker` 新增 `on-clear` 属性 +- `n-upload` 的 `on-preview` 属性新增 `detail.event` 参数，关闭 [#6036](https://github.com/tusen-ai/naive-ui/issues/6036) ## 2.38.2 diff --git a/src/upload/demos/enUS/index.demo-entry.md b/src/upload/demos/enUS/index.demo-entry.md index 77f9e180a..819341bee 100644 --- a/src/upload/demos/enUS/index.demo-entry.md +++ b/src/upload/demos/enUS/index.demo-entry.md @@ -66,7 +66,7 @@ download.vue | on-finish | `(options: { file: UploadFileInfo, event?: Event }) => UploadFileInfo \| undefined` | `({ file }) => file` | Upload finished callback. You can intercept and even modify the uploaded `UploadFileInfo`. Note: file will be null in next event-loop | | | on-before-upload | `(options: { file: UploadFileInfo, fileList: Array }) => (Promise \| boolean \| void)` | `true` | Upload ready to start callback. Returning `false`, a promise resolved with `false`, or a rejected promise will cancel the upload. | | | on-download | `(file: FileInfo) => void` | `undefined` | Callback for clicking download buttons. Returning `false`, `Promise resolve false`, `Promise rejected` will cancel the download. | | -| on-preview | `(file: FileInfo) => void` | `undefined` | Callback for clicking file links or preview buttons. | | +| on-preview | `(file: FileInfo, detail: { event: MouseEvent }) => void` | `undefined` | Callback for clicking file links or preview buttons. You can use `preventDefault` to prevent default anchor link open behavior. | `detail.event` NEXT_VERSION | | on-remove | `(options: { file: UploadFileInfo, fileList: Array, index: number }) => Promise \| boolean \| any` | `() => true` | File removed callback. Returning `false`, a promise resolved with `false`, or a rejected promise will cancel this removal. | `index` 2.38.2 | | on-update:file-list | `(fileList: UploadFileInfo[]) => void` | `undefined` | Callback function triggered on file-list changes. | | diff --git a/src/upload/demos/zhCN/index.demo-entry.md b/src/upload/demos/zhCN/index.demo-entry.md index dd553fc82..d58ad08da 100644 --- a/src/upload/demos/zhCN/index.demo-entry.md +++ b/src/upload/demos/zhCN/index.demo-entry.md @@ -67,7 +67,7 @@ debug.vue | on-finish | `(options: { file: UploadFileInfo, event?: ProgressEvent }) => UploadFileInfo \| undefined` | `({ file }) => file` | 文件上传结束的回调，可以修改传入的 UploadFileInfo 或者返回一个新的 UploadFileInfo。注意：file 将会下一次事件循环中被置为 null | | | on-before-upload | `(options: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => (Promise \| boolean \| void)` | `undefined` | 文件上传之前的回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次上传 | | | on-download | `(file: FileInfo) => void` | `undefined` | 点击文件下载按钮的回调函数，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次下载 | | -| on-preview | `(file: FileInfo) => void` | `undefined` | 点击文件链接或预览按钮的回调函数 | | +| on-preview | `(file: FileInfo, detail: { event: MouseEvent }) => void` | `undefined` | 点击文件链接或预览按钮的回调函数，你可以通过 `preventDefault` 来取消默认的链接打开行为 | `detail.event` NEXT_VERSION | | on-remove | `(options: { file: UploadFileInfo, fileList: Array, index: number }) => Promise \| boolean \| any` | `() => true` | 文件删除回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次删除 | `index` 2.38.2 | | on-update:file-list | `(fileList: UploadFileInfo[]) => void` | `undefined` | 当 file-list 改变时触发的回调函数 | | diff --git a/src/upload/src/UploadFile.tsx b/src/upload/src/UploadFile.tsx index ea4e6a1ca..f067fb3b0 100644 --- a/src/upload/src/UploadFile.tsx +++ b/src/upload/src/UploadFile.tsx @@ -182,8 +182,9 @@ export default defineComponent({ } = NUpload if (onPreview) { - e.preventDefault() - onPreview(props.file) + onPreview(props.file, { + event: e + }) } else if (props.listType === 'image-card') { const { value } = imageRef if (!value) return diff --git a/src/upload/src/interface.ts b/src/upload/src/interface.ts index b6d631cd4..58ff26183 100644 --- a/src/upload/src/interface.ts +++ b/src/upload/src/interface.ts @@ -99,7 +99,12 @@ export type OnBeforeUpload = (data: { export type ListType = 'text' | 'image' | 'image-card' -export type OnPreview = (file: UploadSettledFileInfo) => void +export type OnPreview = ( + file: UploadSettledFileInfo, + detail: { + event: MouseEvent + } +) => void export type CreateThumbnailUrl = ( file: File | null,