feat: element plus中使用messageBox技巧

src/views/demo/elementPlusMessageBoxUse.vue

@@ -41,6 +41,12 @@
                 >
                     弹出确认框（同步处理）
                 </el-button>
+                <el-button
+                    type="primary"
+                    @click="doHandleCancelAndClose"
+                >
+                    弹出确认框（同步处理,点X和取消不同处理）
+                </el-button>
             </div>
         </el-card>
     </div>
@@ -176,6 +182,72 @@ const doConfirm = async () => {
     await hanldeNewFlowWithLoading();
     mockRequest('我是原始请求');
 };
+
+// 这里要求一定要区分ElMessageBox.confirm中点击确认，取消和点击X的区别
+const hanldeNewFlowWithLoadingAndAction = async () => {
+    return new Promise(async (resolve) => {
+        if (newSwitch.value !== 'ON') {
+            resolve('pass');
+            return;
+        }
+
+        let res = await mockRequest('我是新请求1', newDialogSwitch.value === 'ON');
+        if (res) {
+            try {
+                await ElMessageBox.confirm('确定要删除吗?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                    closeOnClickModal: false,
+                    // 最重要的就是这里，加上这个属性，点击取消就是cancel，点击x就是close
+                    distinguishCancelAndClose: true,
+                    beforeClose: async (action, instance, done) => {
+                        try {
+                            if (action === 'confirm') {
+                                instance.confirmButtonLoading = true;
+                                await mockRequest('我是新请求2');
+                            } else if (action === 'cancel') {
+                                instance.cancelButtonLoading = true;
+                                await mockRequest('我是新请求3');
+                            }
+                        } finally {
+                            instance.confirmButtonLoading = false;
+                            instance.cancelButtonLoading = false;
+                            done();
+                            resolve(action);
+                        }
+                    },
+                });
+            } catch {
+                // 这里不加会导致ElMessageBox.confirm的取消cancel没有获取回调处理
+                console.log('点击取消');
+            }
+        } else {
+            resolve('pass');
+        }
+    });
+};
+
+const doHandleCancelAndClose = async () => {
+    // 这里先模拟做一些逻辑处理
+    let params = {
+        id: 1,
+    };
+    if (!params.id) {
+        ElMessage.error('id不存在');
+        return;
+    }
+
+    /**
+     * 注意这里，这里是新代码执行逻辑
+     */
+    let action = await hanldeNewFlowWithLoadingAndAction();
+    // 如果用户点击X，即action为close，则后续不再执行
+    if (action === 'close') {
+        return;
+    }
+    mockRequest('我是原始请求');
+};
 </script>
 
 <style lang="scss" scoped></style>