by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: helpMessage插槽

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
apps/web-antd/src/components/upload/src/file-upload.vue
View File

@ -102,31 +102,33 @@ const {
</p> </p>
</div> </div>
</CurrentUploadComponent> </CurrentUploadComponent>
<I18nT <slot name="helpMessage" v-bind="{ maxCount, disabled, maxSize, accept }">
v-if="helpMessage" <I18nT
scope="global" v-if="helpMessage"
keypath="component.upload.uploadHelpMessage" scope="global"
tag="div" keypath="component.upload.uploadHelpMessage"
class="mt-2" tag="div"
:class="{ 'upload-text__disabled': disabled }" class="mt-2"
> :class="{ 'upload-text__disabled': disabled }"
<template #size> >
<span <template #size>
class="text-primary mx-1 font-medium" <span
:class="{ 'upload-text__disabled': disabled }" class="text-primary mx-1 font-medium"
> :class="{ 'upload-text__disabled': disabled }"
{{ maxSize }}MB >
</span> {{ maxSize }}MB
</template> </span>
<template #ext> </template>
<span <template #ext>
class="text-primary mx-1 font-medium" <span
:class="{ 'upload-text__disabled': disabled }" class="text-primary mx-1 font-medium"
> :class="{ 'upload-text__disabled': disabled }"
{{ acceptFormat }} >
</span> {{ acceptFormat }}
</template> </span>
</I18nT> </template>
</I18nT>
</slot>
</div> </div>
</template> </template>

51
apps/web-antd/src/components/upload/src/image-upload.vue
View File

@ -79,30 +79,33 @@ const { previewVisible, previewImage, handleCancel, handlePreview } =
<div class="mt-[8px]">{{ $t('component.upload.upload') }}</div> <div class="mt-[8px]">{{ $t('component.upload.upload') }}</div>
</div> </div>
</Upload> </Upload>
<I18nT <slot name="helpMessage" v-bind="{ maxCount, disabled, maxSize, accept }">
v-if="helpMessage" <I18nT
scope="global" v-if="helpMessage"
keypath="component.upload.uploadHelpMessage" scope="global"
tag="div" keypath="component.upload.uploadHelpMessage"
:class="{ 'upload-text__disabled': disabled }" tag="div"
> :class="{ 'upload-text__disabled': disabled }"
<template #size> >
<span <template #size>
class="text-primary mx-1 font-medium" <span
:class="{ 'upload-text__disabled': disabled }" class="text-primary mx-1 font-medium"
> :class="{ 'upload-text__disabled': disabled }"
{{ maxSize }}MB >
</span> {{ maxSize }}MB
</template> </span>
<template #ext> </template>
<span <template #ext>
class="text-primary mx-1 font-medium" <span
:class="{ 'upload-text__disabled': disabled }" class="text-primary mx-1 font-medium"
> :class="{ 'upload-text__disabled': disabled }"
{{ acceptFormat }} >
</span> {{ acceptFormat }}
</template> </span>
</I18nT> </template>
</I18nT>
</slot>
<ImagePreviewGroup <ImagePreviewGroup
:preview="{ :preview="{
visible: previewVisible, visible: previewVisible,

2
apps/web-antd/src/locales/langs/en-US/component.json
View File

@ -51,7 +51,7 @@
"uploading": "Uploading", "uploading": "Uploading",
"uploadWait": "Please wait for the file upload to finish", "uploadWait": "Please wait for the file upload to finish",
"reUploadFailed": "Re-upload failed files", "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", "unknownFileType": "Unknown file type, unable to upload",
"confirmDelete": "Confirm file deletion {0}?", "confirmDelete": "Confirm file deletion {0}?",
"clickOrDrag": "Click or drag file to this area to upload" "clickOrDrag": "Click or drag file to this area to upload"

2
apps/web-antd/src/locales/langs/zh-CN/component.json
View File

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

8
apps/web-antd/src/views/演示使用自行删除/upload/index.vue
View File

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