feat: helpMessage插槽

apps/web-antd/src/components/upload/src/file-upload.vue

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

apps/web-antd/src/components/upload/src/image-upload.vue

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

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

@@ -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"

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

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

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

@@ -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>