feat: 函数式弹框ReDialog添加点击确认按钮后是否开启loading加载动画功能

pure-admin · Jul 30, 2024 · 6d7e92f · 6d7e92f
1 parent 0706f37
commit 6d7e92f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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>