feat: ReDialog组件的确定按钮提供关闭按钮动画closeLoading功能

pure-admin · Aug 5, 2024 · 96152ed · 96152ed
1 parent 37ab40f
commit 96152ed
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/src/components/ReDialog/index.vue b/src/components/ReDialog/index.vue
@@ -53,14 +53,17 @@ const footerButtons = computed(() => {
                   }
                 );
               }
-              const done = () => {
+              const closeLoading = () => {
                 if (options?.sureBtnLoading) {
                   sureBtnMap.value[index].loading = false;
                 }
+              };
+              const done = () => {
+                closeLoading();
                 closeDialog(options, index, { command: "sure" });
               };
               if (options?.beforeSure && isFunction(options?.beforeSure)) {
-                options.beforeSure(done, { options, index });
+                options.beforeSure(done, { options, index, closeLoading });
               } else {
                 done();
               }

diff --git a/src/components/ReDialog/type.ts b/src/components/ReDialog/type.ts
@@ -69,11 +69,11 @@ type DialogProps = {
 type Popconfirm = {
   /** 标题 */
   title?: string;
-  /** 确认按钮文字 */
+  /** 确定按钮文字 */
   confirmButtonText?: string;
   /** 取消按钮文字 */
   cancelButtonText?: string;
-  /** 确认按钮类型，默认 `primary` */
+  /** 确定按钮类型，默认 `primary` */
   confirmButtonType?: ButtonType;
   /** 取消按钮类型，默认 `text` */
   cancelButtonType?: ButtonType;
@@ -121,7 +121,7 @@ type ButtonProps = {
   round?: boolean;
   /** 是否为圆形按钮，默认 `false` */
   circle?: boolean;
-  /** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
+  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
   popconfirm?: Popconfirm;
   /** 是否为加载中状态，默认 `false` */
   loading?: boolean;
@@ -160,9 +160,9 @@ interface DialogOptions extends DialogProps {
   props?: any;
   /** 是否隐藏 `Dialog` 按钮操作区的内容 */
   hideFooter?: boolean;
-  /** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
+  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
   popconfirm?: Popconfirm;
-  /** 点击确认按钮后是否开启 `loading` 加载动画 */
+  /** 点击确定按钮后是否开启 `loading` 加载动画 */
   sureBtnLoading?: boolean;
   /**
    * @description 自定义对话框标题的内容渲染器
@@ -261,10 +261,13 @@ interface DialogOptions extends DialogProps {
     done: Function,
     {
       options,
-      index
+      index,
+      closeLoading
     }: {
       options: DialogOptions;
       index: number;
+      /** 关闭确定按钮的 `loading` 加载动画 */
+      closeLoading: Function;
     }
   ) => void;
 }

diff --git a/src/views/components/dialog/index.vue b/src/views/components/dialog/index.vue
@@ -456,7 +456,9 @@ function onSureBtnLoading() {
     sureBtnLoading: true,
     title: "点击底部确定按钮可开启按钮动画",
     contentRenderer: () => <p>弹框内容-点击底部确定按钮可开启按钮动画</p>,
-    beforeSure: done => {
+    beforeSure: (done, { closeLoading }) => {
+      // closeLoading() // 关闭确定按钮动画，不关闭弹框
+      // done() // 关闭确定按钮动画并关闭弹框
       setTimeout(() => done(), 800);
     }
   });