From 6d7e92fed1f3b52a3b1bb7c5fd3cca6652a6ba17 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 30 Jul 2024 14:56:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=87=BD=E6=95=B0=E5=BC=8F=E5=BC=B9?=
 =?UTF-8?q?=E6=A1=86`ReDialog`=E6=B7=BB=E5=8A=A0=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E6=8C=89=E9=92=AE=E5=90=8E=E6=98=AF=E5=90=A6?=
 =?UTF-8?q?=E5=BC=80=E5=90=AF`loading`=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReDialog/index.vue     | 17 ++++++++++++++++-
 src/components/ReDialog/type.ts       |  2 ++
 src/views/components/dialog/index.vue | 14 ++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/ReDialog/index.vue b/src/components/ReDialog/index.vue
index 1db105f535..df86143cca 100644
--- a/src/components/ReDialog/index.vue
+++ b/src/components/ReDialog/index.vue
@@ -15,6 +15,7 @@ defineOptions({
   name: "ReDialog"
 });
 
+const sureBtnMap = ref({});
 const fullscreen = ref(false);
 
 const footerButtons = computed(() => {
@@ -43,8 +44,21 @@ const footerButtons = computed(() => {
             bg: true,
             popconfirm: options?.popconfirm,
             btnClick: ({ dialog: { options, index } }) => {
-              const done = () =>
+              if (options?.sureBtnLoading) {
+                sureBtnMap.value[index] = Object.assign(
+                  {},
+                  sureBtnMap.value[index],
+                  {
+                    loading: true
+                  }
+                );
+              }
+              const done = () => {
+                if (options?.sureBtnLoading) {
+                  sureBtnMap.value[index].loading = false;
+                }
                 closeDialog(options, index, { command: "sure" });
+              };
               if (options?.beforeSure && isFunction(options?.beforeSure)) {
                 options.beforeSure(done, { options, index });
               } else {
@@ -172,6 +186,7 @@ function handleClose(
           <el-button
             v-else
             v-bind="btn"
+            :loading="key === 1 && sureBtnMap[index]?.loading"
             @click="
               btn.btnClick({
                 dialog: { options, index },
diff --git a/src/components/ReDialog/type.ts b/src/components/ReDialog/type.ts
index 4cc7476884..7ea8f71fb9 100644
--- a/src/components/ReDialog/type.ts
+++ b/src/components/ReDialog/type.ts
@@ -162,6 +162,8 @@ interface DialogOptions extends DialogProps {
   hideFooter?: boolean;
   /** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
   popconfirm?: Popconfirm;
+  /** 点击确认按钮后是否开启 `loading` 加载动画 */
+  sureBtnLoading?: boolean;
   /**
    * @description 自定义对话框标题的内容渲染器
    * @see {@link https://element-plus.org/zh-CN/component/dialog.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%B4%E9%83%A8}
diff --git a/src/views/components/dialog/index.vue b/src/views/components/dialog/index.vue
index dda1a57c10..8f46e04c0a 100644
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -450,6 +450,17 @@ function onBeforeSureClick() {
     }
   });
 }
+
+function onSureBtnLoading() {
+  addDialog({
+    sureBtnLoading: true,
+    title: "点击底部确定按钮可开启按钮动画",
+    contentRenderer: () => <p>弹框内容-点击底部确定按钮可开启按钮动画</p>,
+    beforeSure: done => {
+      setTimeout(() => done(), 800);
+    }
+  });
+}
 </script>
 
 <template>
@@ -534,6 +545,9 @@ function onBeforeSureClick() {
       <el-button @click="onBeforeSureClick">
         点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
       </el-button>
+      <el-button @click="onSureBtnLoading">
+        点击底部确定按钮可开启按钮动画
+      </el-button>
     </el-space>
   </el-card>
 </template>