From d48704fbea1a66e203e72f40797a4616c4dd2fc4 Mon Sep 17 00:00:00 2001 From: Lyan-u Date: Tue, 26 Dec 2023 11:03:27 +0000 Subject: [PATCH] =?UTF-8?q?feat(upload):=20=E6=96=B0=E5=A2=9E=20clickUploa?= =?UTF-8?q?d=20=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat(upload): 新增 clickUpload 事件 #1178 --- src/upload/demos/multiple.vue | 4 ++++ src/upload/props.ts | 2 ++ src/upload/type.ts | 4 ++++ src/upload/upload.en-US.md | 3 +++ src/upload/upload.md | 2 ++ src/upload/upload.vue | 6 +++++- 6 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/upload/demos/multiple.vue b/src/upload/demos/multiple.vue index 2878a5ef5..925a121e2 100644 --- a/src/upload/demos/multiple.vue +++ b/src/upload/demos/multiple.vue @@ -14,6 +14,7 @@ :on-success="onSuccess" :on-remove="onRemove" :on-select-change="onSelectChange" + :on-click-upload="onClickUpload" > @@ -47,6 +48,9 @@ const onRemove = ({ index, file, e }: UploadRemoveContext) => { const onSelectChange = (files: Array) => { console.log('====onSelectChange', files); }; +const onClickUpload = ({ e }: { e: MouseEvent }) => { + console.log('====onClickUpload', e); +}; const action = 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo'; const files = ref([ { diff --git a/src/upload/props.ts b/src/upload/props.ts index 1ff283fb3..4932240a1 100644 --- a/src/upload/props.ts +++ b/src/upload/props.ts @@ -160,4 +160,6 @@ export default { onValidate: Function as PropType, /** 待上传文件列表发生变化时触发。`context.files` 表示事件参数为待上传文件，`context.trigger` 引起此次变化的触发来源 */ onWaitingUploadFilesChange: Function as PropType, + /** 点击上传区域时触发。TS 类型：`(context: { e: MouseEvent })` */ + onClickUpload: Function as PropType, }; diff --git a/src/upload/type.ts b/src/upload/type.ts index a266e7ab6..7105895d0 100644 --- a/src/upload/type.ts +++ b/src/upload/type.ts @@ -200,6 +200,10 @@ export interface TdUploadProps { files: Array; trigger: 'validate' | 'remove' | 'uploaded'; }) => void; + /** + * 点击上传区域时触发。TS 类型：`(context: { e: MouseEvent })` + */ + onClickUpload?: (context: { e: MouseEvent }) => void; } export interface UploadFile extends PlainObject { diff --git a/src/upload/upload.en-US.md b/src/upload/upload.en-US.md index 6a476cadc..dd1edde34 100644 --- a/src/upload/upload.en-US.md +++ b/src/upload/upload.en-US.md @@ -38,6 +38,8 @@ onRemove | Function | | Typescript：`(context: UploadRemoveContext) => void` void`
trigger after file choose and before upload。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }`
| N onSuccess | Function | | Typescript：`(context: SuccessContext) => void`
trigger on all files uploaded successfully。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }`
| N onValidate | Function | | Typescript：`(context: { type: UploadValidateType, files: UploadFile[] }) => void`
trigger on length over limit, or trigger on file size over limit。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' \| 'FILES_OVER_LENGTH_LIMIT' \| 'FILTER_FILE_SAME_NAME' \| 'BEFORE_ALL_FILES_UPLOAD' \| 'CUSTOM_BEFORE_UPLOAD'`
| N +onClickUpload | Function | - | trigger on upload area click. Typescript：`(context: { e: MouseEvent })` | N + ### Upload Events @@ -51,6 +53,7 @@ remove | `(context: UploadRemoveContext)` | trigger on file removed。[see more select-change | `(files: File[], context: UploadSelectChangeContext)` | trigger after file choose and before upload。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }`
success | `(context: SuccessContext)` | trigger on all files uploaded successfully。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }`
validate | `(context: { type: UploadValidateType, files: UploadFile[] })` | trigger on length over limit, or trigger on file size over limit。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' \| 'FILES_OVER_LENGTH_LIMIT' \| 'FILTER_FILE_SAME_NAME' \| 'BEFORE_ALL_FILES_UPLOAD' \| 'CUSTOM_BEFORE_UPLOAD'`
+clickUpload | `(context: { e: MouseEvent })` | trigger on upload area click. ### UploadFile diff --git a/src/upload/upload.md b/src/upload/upload.md index 3af786fea..2f839c4f6 100644 --- a/src/upload/upload.md +++ b/src/upload/upload.md @@ -38,6 +38,7 @@ onRemove | Function | | TS 类型：`(context: UploadRemoveContext) => void`
void`
选择文件或图片之后，上传之前，触发该事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }`
| N onSuccess | Function | | TS 类型：`(context: SuccessContext) => void`
上传成功后触发。
`context.currentFiles` 表示当次请求上传的文件（无论成功或失败），`context.fileList` 表示上传成功后的文件，`context.response` 表示上传请求的返回数据。
`context.results` 表示单次选择全部文件上传成功后的响应结果，可以在这个字段存在时提醒用户上传成功或失败。
。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }`
| N onValidate | Function | | TS 类型：`(context: { type: UploadValidateType, files: UploadFile[] }) => void`
文件上传校验结束事件，文件数量超出、文件大小超出限制、文件同名、`beforeAllFilesUpload` 返回值为假、`beforeUpload` 返回值为假等场景会触发。
注意：如果设置允许上传同名文件，即 `allowUploadDuplicateFile=true`，则不会因为文件重名触发该事件。
结合 `status` 和 `tips` 可以在组件中呈现不同类型的错误（或告警）提示。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' \| 'FILES_OVER_LENGTH_LIMIT' \| 'FILTER_FILE_SAME_NAME' \| 'BEFORE_ALL_FILES_UPLOAD' \| 'CUSTOM_BEFORE_UPLOAD'`
| N +onClickUpload | Function | - | 点击上传区域时触发。TS 类型：`(context: { e: MouseEvent })` | N ### Upload Events @@ -51,6 +52,7 @@ remove | `(context: UploadRemoveContext)` | 移除文件时触发。[详细类 select-change | `(files: File[], context: UploadSelectChangeContext)` | 选择文件或图片之后，上传之前，触发该事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }`
success | `(context: SuccessContext)` | 上传成功后触发。
`context.currentFiles` 表示当次请求上传的文件（无论成功或失败），`context.fileList` 表示上传成功后的文件，`context.response` 表示上传请求的返回数据。
`context.results` 表示单次选择全部文件上传成功后的响应结果，可以在这个字段存在时提醒用户上传成功或失败。
。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }`
validate | `(context: { type: UploadValidateType, files: UploadFile[] })` | 文件上传校验结束事件，文件数量超出、文件大小超出限制、文件同名、`beforeAllFilesUpload` 返回值为假、`beforeUpload` 返回值为假等场景会触发。
注意：如果设置允许上传同名文件，即 `allowUploadDuplicateFile=true`，则不会因为文件重名触发该事件。
结合 `status` 和 `tips` 可以在组件中呈现不同类型的错误（或告警）提示。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' \| 'FILES_OVER_LENGTH_LIMIT' \| 'FILTER_FILE_SAME_NAME' \| 'BEFORE_ALL_FILES_UPLOAD' \| 'CUSTOM_BEFORE_UPLOAD'`
+clickUpload | `(context: { e: MouseEvent })` | 点击上传区域时触发。 ### UploadFile diff --git a/src/upload/upload.vue b/src/upload/upload.vue index 25d266fb9..791370b3f 100644 --- a/src/upload/upload.vue +++ b/src/upload/upload.vue @@ -81,6 +81,7 @@ export default defineComponent({ 'success', 'select-change', 'validate', + 'click-upload', ], setup(props) { const { @@ -116,10 +117,13 @@ export default defineComponent({ }); }; - const triggerUpload = () => { + const triggerUpload = (e: MouseEvent) => { const input = inputRef.value as HTMLInputElement; if (disabled?.value) return; input.click(); + props.onClickUpload?.({ + e, + }); }; const previewImgs = computed(() => {