From 639475d2df3da783ff706ef2b5ee3585b1bda5e9 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Wed, 4 Sep 2024 16:26:17 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=9B=BE=E7=89=87=E8=A3=81=E5=89=AA=20?=
 =?UTF-8?q?loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/cropper/src/cropper-modal.vue  | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/web-antd/src/components/cropper/src/cropper-modal.vue b/apps/web-antd/src/components/cropper/src/cropper-modal.vue
index 66cb6044..8652da1d 100644
--- a/apps/web-antd/src/components/cropper/src/cropper-modal.vue
+++ b/apps/web-antd/src/components/cropper/src/cropper-modal.vue
@@ -39,8 +39,22 @@ let scaleY = 1;
 const prefixCls = 'cropper-am';
 const [BasicModal, modalApi] = useVbenModal({
   onConfirm: handleOk,
+  onOpenChange(isOpen) {
+    // 打开的时候loading CropperImage组件加载完毕关闭loading
+    if (isOpen) {
+      modalLoading(true);
+    } else {
+      // 关闭时候清空右侧预览
+      previewSource.value = '';
+      modalLoading(false);
+    }
+  },
 });
 
+function modalLoading(loading: boolean) {
+  modalApi.setState({ confirmLoading: loading, loading });
+}
+
 // Block upload
 function handleBeforeUpload(file: File) {
   if (props.size > 0 && file.size > 1024 * 1024 * props.size) {
@@ -64,6 +78,8 @@ function handleCropend({ imgBase64 }: CropendResult) {
 
 function handleReady(cropperInstance: Cropper) {
   cropper.value = cropperInstance;
+  // 画布加载完毕 关闭loading
+  modalLoading(false);
 }
 
 function handlerToolbar(event: string, arg?: number) {
@@ -85,12 +101,12 @@ async function handleOk() {
     }
     const blob = dataURLtoBlob(previewSource.value);
     try {
-      modalApi.setState({ confirmLoading: true, loading: true });
+      modalLoading(true);
       const result = await uploadApi({ file: blob, filename, name: 'file' });
       emit('uploadSuccess', { data: result.url, source: previewSource.value });
       modalApi.close();
     } finally {
-      modalApi.setState({ confirmLoading: false, loading: false });
+      modalLoading(false);
     }
   }
 }