feat: element plus中使用messageBox技巧

src/router/modules/demo.ts

@@ -166,6 +166,10 @@ const titleArr = [
         key: 'scrollSnapType',
         title: '滚动吸附效果',
     },
+    {
+        key: 'elementPlusMessageBoxUse',
+        title: 'element plus中使用messageBox技巧',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/elementPlusMessageBoxUse.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="p-5 space-y-5 !bg-gray-100">
+        <el-card header="element plus中使用messageBox技巧">
+            <el-button
+                type="primary"
+                class="mb-5"
+                @click="showMessageBox"
+            >
+                普通弹出确认框
+            </el-button>
+
+            <!-- 这里添加切换开关switch -->
+            <div>
+                <div>
+                    <span>切换新功能开关:</span>
+                    <el-switch
+                        v-model="newSwitch"
+                        class="mr-5"
+                        inline-prompt
+                        active-text="开"
+                        inactive-text="关"
+                        active-value="ON"
+                        inactive-value="OFF"
+                    />
+                </div>
+                <div>
+                    <span>新功能是否弹窗开关:</span>
+                    <el-switch
+                        v-model="newDialogSwitch"
+                        class="mr-5"
+                        inline-prompt
+                        active-text="开"
+                        inactive-text="关"
+                        active-value="ON"
+                        inactive-value="OFF"
+                    />
+                </div>
+                <el-button
+                    type="primary"
+                    @click="doConfirm"
+                >
+                    弹出确认框（同步处理）
+                </el-button>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const showMessageBox = () => {
+    ElMessageBox.confirm('确定要删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    })
+        .then(() => {
+            ElMessage({
+                type: 'success',
+                message: '删除成功',
+            });
+        })
+        .catch(() => {
+            ElMessage({
+                type: 'info',
+                message: '取消删除',
+            });
+        });
+};
+
+// 这里模拟请求，做异步实验
+const mockRequest = (message, status = true) => {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            ElMessage.success(message);
+            resolve(status);
+        }, 500);
+    });
+};
+
+/**
+ * doConfirm默认做了一些逻辑处理，然后发送了一个请求
+ * 现在新的需求如下：
+ * 1. 我有一个开关，开关打开的时候，执行以下操作
+ * 2. 发起一个接口请求（我是新请求1），返回true显示一个确认弹窗
+ * 3. 点击确认，发起一个接口请求（我是新请求2）
+ * 4. 点击取消，发起一个接口请求（我是新请求3）
+ * 5. 最后再执行原始请求
+ * 上面的操作必须是同步的。
+ */
+const newSwitch = ref('ON');
+const newDialogSwitch = ref('ON');
+
+// ElMessageBox中确认按钮不需要loading方式
+const hanldeNewFlow = async () => {
+    return new Promise(async (resolve) => {
+        if (newSwitch.value !== 'ON') {
+            resolve(false);
+            return;
+        }
+
+        let res = await mockRequest('我是新请求1', newDialogSwitch.value === 'ON');
+        if (res) {
+            try {
+                await ElMessageBox.confirm('确定要删除吗?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                    closeOnClickModal: false,
+                });
+                await mockRequest('我是新请求2');
+            } catch (error) {
+                await mockRequest('我是新请求3');
+            }
+        }
+        resolve(true);
+    });
+};
+
+// ElMessageBox中确认按钮需要loading方式
+const hanldeNewFlowWithLoading = async () => {
+    return new Promise(async (resolve) => {
+        if (newSwitch.value !== 'ON') {
+            resolve(false);
+            return;
+        }
+
+        let res = await mockRequest('我是新请求1', newDialogSwitch.value === 'ON');
+        if (res) {
+            try {
+                await ElMessageBox.confirm('确定要删除吗?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                    closeOnClickModal: false,
+                    beforeClose: async (action, instance, done) => {
+                        try {
+                            if (action === 'confirm') {
+                                instance.confirmButtonLoading = true;
+                                await mockRequest('我是新请求2');
+                            } else {
+                                instance.cancelButtonLoading = true;
+                                await mockRequest('我是新请求3');
+                            }
+                        } finally {
+                            instance.confirmButtonLoading = false;
+                            instance.cancelButtonLoading = false;
+                            done();
+                        }
+                    },
+                });
+            } catch {
+                // 这里不加会导致ElMessageBox.confirm的取消cancel没有获取回调处理
+                console.log('点击取消');
+            }
+        }
+        resolve(true);
+    });
+};
+
+const doConfirm = async () => {
+    // 这里先模拟做一些逻辑处理
+    let params = {
+        id: 1,
+    };
+    if (!params.id) {
+        ElMessage.error('id不存在');
+        return;
+    }
+
+    /**
+     * 注意这里，这里是新代码执行逻辑
+     */
+    await hanldeNewFlowWithLoading();
+    mockRequest('我是原始请求');
+};
+</script>
+
+<style lang="scss" scoped></style>