当前位置：首页 > news >正文

Vue3+TypeScript+Element-Plus确认对话框ElMessageBox.confirm

news 2026/6/28 4:52:40

import { ElMessageBox } from "element-plus"; // 删除模板 async function handleDelete(template: PrintTemplate) { try { await ElMessageBox.confirm("确定删除吗？", "询问", { type: "warning", cancelButtonText: "取消", confirmButtonText: "确定", distinguishCancelAndClose: true, // 区分取消按钮和关闭操作 closeOnClickModal: false, // 点击遮罩层不关闭对话框 closeOnPressEscape: false // 按ESC键不关闭对话框 }); if (template.id) { await printTemplateApi.deleteTemplate(template.id); ElMessage.success("删除成功"); loadTemplates(); } } catch (error) { // 区分用户取消操作和删除操作出错 // Element Plus MessageBox 在用户取消时会 reject，并且 error 的类型是 string 'cancel' 或 'close' if (error === "cancel" || error === "close") { // 用户取消操作，不显示任何提示 return; } // 真正的删除操作出错，显示错误提示 console.error("删除模板失败:", error); ElMessage.error("删除失败"); } }

这段代码使用了 Element Plus 的ElMessageBox.confirm方法创建一个确认对话框，并配置了一些特定的行为选项。让我详细解释每个部分：

代码整体解释

typescript

await ElMessageBox.confirm("确定删除吗？", "询问", { type: "warning", cancelButtonText: "取消", confirmButtonText: "确定", distinguishCancelAndClose: true, // 区分取消按钮和关闭操作 closeOnClickModal: false, // 点击遮罩层不关闭对话框 closeOnPressEscape: false // 按ESC键不关闭对话框 });

逐部分解析

1.基本参数

typescript

"确定删除吗？" // 消息内容 "询问" // 对话框标题

2.配置选项详解

`type: "warning"`

设置对话框类型为警告类型
会显示警告图标（通常是黄色感叹号）
有视觉上的区分，让用户知道这是需要谨慎操作的动作

`cancelButtonText: "取消"`

设置取消按钮的文本为"取消"
默认可能是"Cancel"，这里中文化

`confirmButtonText: "确定"`

设置确定按钮的文本为"确定"
默认可能是"OK"，这里中文化

`distinguishCancelAndClose: true`⭐重要

这是关键选项，它的作用是：

默认情况：点击取消按钮和通过其他方式关闭对话框（如ESC、点击遮罩层）都会返回相同的reject结果
设置为true后：
- 点击"取消"按钮 → 返回'cancel'
- 通过关闭操作（ESC、点击遮罩层）关闭 → 返回'close'
- 这样可以区分用户是主动点击取消，还是只是关闭了对话框

`closeOnClickModal: false`

控制是否可以通过点击模态框（遮罩层）关闭对话框
false表示不能通过点击灰色背景区域关闭对话框
用户必须点击"确定"或"取消"按钮才能关闭对话框
增加了操作的安全性，防止误触关闭

`closeOnPressEscape: false`

控制是否可以通过按ESC键关闭对话框
false表示不能通过ESC键关闭对话框
同样强制用户明确选择确定或取消
避免键盘操作意外关闭对话框

实际效果对比

默认行为（没有这些选项）：

点击取消按钮 → 返回reject
按ESC键 → 返回reject
点击遮罩层 → 返回reject
所有关闭方式结果都一样，无法区分

设置这些选项后：

点击取消按钮 → 返回'cancel'
按ESC键 → 返回'close'
点击遮罩层 →无效（不会关闭）
可以明确知道用户的操作意图

使用示例

typescript

try { await ElMessageBox.confirm("确定删除吗？", "询问", { type: "warning", cancelButtonText: "取消", confirmButtonText: "确定", distinguishCancelAndClose: true, closeOnClickModal: false, closeOnPressEscape: false }); // 用户点击了"确定" console.log("执行删除操作"); } catch (action) { // 区分不同的关闭方式 if (action === 'cancel') { console.log("用户主动点击了取消按钮"); // 可以执行特定逻辑，如记录日志 } else if (action === 'close') { console.log("用户通过ESC或其他方式关闭"); // 可能是无意关闭，可以有不同的处理 } }