Merge pull request Moonofweisheng#620 from 810505339/pr-619

feat: ✨ Upload新增preview-cover插槽
810505339 · Sep 25, 2024 · 2666027 · 2666027
2 parents a31b3ed + 52f9bf6
commit 2666027
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/docs/component/upload.md b/docs/component/upload.md
@@ -567,6 +567,31 @@ const customUpload: UploadMethod = (file, formData, options) => {
 }
 ```
 
+
+## 自定义预览样式
+
+使用 `preview-cover` 插槽可以自定义覆盖在预览区域上方的内容
+
+```html
+<wd-upload v-model:file-list="fileList" accept="image" image-mode="aspectFill" :action="action">
+  <template #preview-cover="{ file,index }">
+            <!-- 小程序拿不到文件 -->
+    <view class="preview-cover">{{ file?.name||`文件${index+1}` }}</view>
+  </template>
+</wd-upload>
+<style>
+  .preview-cover {
+  margin-top: 10rpx;
+  text-align: center;
+}
+</style>
+```
+
+```typescript
+const fileList = ref<UploadFile[]>([])
+const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload'
+```
+
 ## Attributes
 
 | 参数                          | 说明                                                                                                                                                                           | 类型                                   | 可选值                                         | 默认值                     | 最低版本         |
@@ -630,6 +655,7 @@ const customUpload: UploadMethod = (file, formData, options) => {
 | name    | 说明             | 最低版本 |
 | ------- | ---------------- | -------- |
 | default | 上传唤起插槽样式 | -        |
+| preview-cover | 自定义覆盖在预览区域上方的内容 |   $LOWEST_VERSION$   |
 
 ## Events
 

diff --git a/src/pages/upload/Index.vue b/src/pages/upload/Index.vue
@@ -73,6 +73,15 @@
     <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" :action="action">
+        <template #preview-cover="{ file, index }">
+          <!-- 小程序拿不到文件 -->
+          <view class="preview-cover">{{ file.name || `文件${index}` }}</view>
+        </template>
+      </wd-upload>
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup>
@@ -106,6 +115,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 +307,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>
diff --git a/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue b/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" :index="index"></slot>
     </view>
 
     <block v-if="showUpload">