feat: ✨ Upload新增preview-cover插槽

Author: 810505339

docs/component/upload.md

@@ -567,6 +567,25 @@ const customUpload: UploadMethod = (file, formData, options) => {
 }
 ```
 
+
+## 自定义预览样式
+
+使用 `preview-cover` 插槽可以自定义覆盖在预览区域上方的内容
+
+```html
+<wd-upload v-model:file-list="fileList" accept="image" image-mode="aspectFill">
+  <template #preview-cover="{ file }">
+    <view class="preview-cover">{{ file.name }}</view>
+  </template>
+</wd-upload>
+<style>
+  .preview-cover {
+  margin-top: 10rpx;
+  text-align: center;
+}
+</style>
+```
+
 ## Attributes
 
 | 参数                          | 说明                                                                                                                                                                           | 类型                                   | 可选值                                         | 默认值                     | 最低版本         |
@@ -630,6 +649,7 @@ const customUpload: UploadMethod = (file, formData, options) => {
 | name    | 说明             | 最低版本 |
 | ------- | ---------------- | -------- |
 | default | 上传唤起插槽样式 | -        |
+| preview-cover | 自定义覆盖在预览区域上方的内容 | -        |
 
 ## Events
 

src/pages/upload/Index.vue

@@ -73,6 +73,14 @@
     <demo-block title="自定义上传方法">
       <wd-upload v-model:file-list="fileList15" :upload-method="customUpload"></wd-upload>
     </demo-block>
+
+    <demo-block title="自定义预览样式">
+      <wd-upload v-model:file-list="fileList16" accept="image" image-mode="aspectFill">
+        <template #preview-cover="{ file }">
+          <view class="preview-cover">{{ file.name }}</view>
+        </template>
+      </wd-upload>
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup>
@@ -106,6 +114,12 @@ const fileList12 = ref<UploadFile[]>([])
 const fileList13 = ref<UploadFile[]>([])
 const fileList14 = ref<UploadFile[]>([])
 const fileList15 = ref<UploadFile[]>([])
+const fileList16 = ref<UploadFile[]>([
+  {
+    url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
+    name: 'panda'
+  }
+])
 
 const upload14 = ref<UploadInstance>()
 
@@ -292,4 +306,9 @@ const customUpload: UploadMethod = (file, formData, options) => {
   })
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.preview-cover {
+  margin-top: 10rpx;
+  text-align: center;
+}
+</style>

src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue

@@ -64,6 +64,8 @@
         custom-class="wd-upload__close"
         @click="removeFile(index)"
       ></wd-icon>
+      <!-- 自定义预览样式 -->
+      <slot name="preview-cover" v-if="$slots['preview-cover']" :file="file"></slot>
     </view>
 
     <block v-if="showUpload">