feat: helpMessage插槽

This commit is contained in:
dap 2025-03-29 16:13:48 +08:00
parent ffcc21975e
commit b78b599a06
5 changed files with 62 additions and 53 deletions

View File

@ -102,6 +102,7 @@ const {
</p>
</div>
</CurrentUploadComponent>
<slot name="helpMessage" v-bind="{ maxCount, disabled, maxSize, accept }">
<I18nT
v-if="helpMessage"
scope="global"
@ -127,6 +128,7 @@ const {
</span>
</template>
</I18nT>
</slot>
</div>
</template>

View File

@ -79,6 +79,7 @@ const { previewVisible, previewImage, handleCancel, handlePreview } =
<div class="mt-[8px]">{{ $t('component.upload.upload') }}</div>
</div>
</Upload>
<slot name="helpMessage" v-bind="{ maxCount, disabled, maxSize, accept }">
<I18nT
v-if="helpMessage"
scope="global"
@ -103,6 +104,8 @@ const { previewVisible, previewImage, handleCancel, handlePreview } =
</span>
</template>
</I18nT>
</slot>
<ImagePreviewGroup
:preview="{
visible: previewVisible,

View File

@ -51,7 +51,7 @@
"uploading": "Uploading",
"uploadWait": "Please wait for the file upload to finish",
"reUploadFailed": "Re-upload failed files",
"uploadHelpMessage": "Please upload a file in {ext} format that does not exceed {size} MB.",
"uploadHelpMessage": "Please upload a file in {ext} format that does not exceed {size} .",
"unknownFileType": "Unknown file type, unable to upload",
"confirmDelete": "Confirm file deletion {0}?",
"clickOrDrag": "Click or drag file to this area to upload"

View File

@ -51,7 +51,7 @@
"uploading": "上传中",
"uploadWait": "请等待文件上传结束后操作",
"reUploadFailed": "重新上传失败文件",
"uploadHelpMessage": "请上传不超过{size}MB的{ext}格式文件",
"uploadHelpMessage": "请上传不超过{size}的{ext}格式文件",
"unknownFileType": "未知的文件类型, 无法上传",
"confirmDelete": "确认删除文件 {0}?",
"clickOrDrag": "点击或拖动文件到这个区域上传"

View File

@ -75,13 +75,17 @@ function handlePreview(file: UploadFile) {
<FileUpload :disabled="true" :max-count="3" :help-message="false" />
</Card>
<Card title="文件夹上传" size="small">
<Card title="文件夹上传/自定义helpMessage" size="small">
<FileUpload
v-model:value="multipleFileId"
:max-count="3"
:directory="true"
accept="*"
/>
>
<template #helpMessage="slotProps">
<div>自定义helpMessage: {{ JSON.stringify(slotProps) }}</div>
</template>
</FileUpload>
当前绑定值: {{ multipleFileId }}
</Card>
</div>