From ebc571e13f03b6ede7cd03b5051f1e56a42066be Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Mon, 31 Mar 2025 15:14:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20list-type:=20picture-card=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C=E5=85=B3=E9=97=AD=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/upload/src/image-upload.vue    | 15 +++++++++++++++
 .../src/views/演示使用自行删除/upload/index.vue   | 15 +++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/apps/web-antd/src/components/upload/src/image-upload.vue b/apps/web-antd/src/components/upload/src/image-upload.vue
index 445dcfe8..56584ae4 100644
--- a/apps/web-antd/src/components/upload/src/image-upload.vue
+++ b/apps/web-antd/src/components/upload/src/image-upload.vue
@@ -27,6 +27,12 @@ interface ImageUploadProps extends BaseUploadProps {
    * @default picture-card
    */
   listType?: UploadListType;
+  /**
+   * 使用list-type: picture-card时 是否显示动画
+   * 会有一个`弹跳`的效果 默认关闭
+   * @default false
+   */
+  withAnimation?: boolean;
 }
 
 const props = withDefaults(defineProps<ImageUploadProps>(), {
@@ -43,6 +49,7 @@ const props = withDefaults(defineProps<ImageUploadProps>(), {
   helpMessage: true,
   enableDragUpload: false,
   abortOnUnmounted: true,
+  withAnimation: false,
 });
 
 const emit = defineEmits<UploadEmits>();
@@ -78,6 +85,7 @@ function currentPreview(file: UploadFile) {
   <div>
     <Upload
       v-model:file-list="innerFileList"
+      :class="{ 'upload-animation__disabled': !withAnimation }"
       :list-type="listType"
       :accept="accept"
       :disabled="disabled"
@@ -172,4 +180,11 @@ function currentPreview(file: UploadFile) {
     color: rgb(242 242 242 / 25%);
   }
 }
+
+// list-type: picture-card动画效果关闭样式
+.upload-animation__disabled {
+  .ant-upload-animate-inline {
+    animation-duration: 0s !important;
+  }
+}
 </style>
diff --git a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
index 5b433d65..29860163 100644
--- a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
+++ b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
@@ -51,6 +51,8 @@ const customThumbnailUrl: CustomGetter<undefined> = () => {
 };
 
 const { copy } = useClipboard({ legacy: true });
+
+const animationEnable = ref(false);
 </script>
 
 <template>
@@ -207,6 +209,19 @@ const { copy } = useClipboard({ legacy: true });
           :custom-thumb-url="customThumbnailUrl"
         />
       </Card>
+
+      <Card title="图片上传的动画效果" size="small">
+        <div class="my-2">
+          是否启用
+          <span class="font-semibold">list-type: picture-card</span> 的动画效果:
+          <Switch v-model:checked="animationEnable" />
+        </div>
+        <ImageUpload
+          v-model:value="singleImageId"
+          :with-animation="animationEnable"
+        />
+        当前绑定值: {{ singleImageId }}
+      </Card>
     </div>
   </Page>
 </template>