企业官网建设流程全解析

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键关闭对话框

• 同样强制用户明确选择确定或取消

• 避免键盘操作意外关闭对话框

实际效果对比

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

1. 点击取消按钮 → 返回reject

2. 按ESC键 → 返回reject

3. 点击遮罩层 → 返回reject

4. 所有关闭方式结果都一样，无法区分

设置这些选项后：

1. 点击取消按钮 → 返回'cancel'

2. 按ESC键 → 返回'close'

3. 点击遮罩层 →无效（不会关闭）

4. 可以明确知道用户的操作意图

使用示例

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或其他方式关闭"); // 可能是无意关闭，可以有不同的处理 } }

适用场景

这种配置特别适合：

1. 重要操作（如删除数据）

2. 财务操作（如转账、支付）

3. 系统设置变更

4. 任何需要用户明确确认的操作

安全性考虑

这样的配置提供了更强的操作安全性：

• 防止误操作：用户不能通过简单的点击背景或按ESC键就关闭对话框

• 明确意图：必须通过明确的按钮点击来表达选择

• 可追踪：可以区分不同的关闭方式，便于日志记录和用户行为分析

总的来说，这段代码创建了一个非常严格的确认对话框，确保用户必须明确选择"确定"或"取消"，无法通过其他方式轻松关闭，这在重要的操作确认中是非常有用的安全措施。