反馈组件：对话框、消息与通知

第14课 反馈组件：对话框、消息与通知

• 掌握 el-dialog 的进阶用法（防误关、关闭销毁）
• 合理使用 ElMessage 的四种口吻给予操作反馈
• 用 ElMessageBox.confirm 实现删除等危险操作的二次确认
• 了解 ElNotification 系统通知的用法
• 能够区分四种反馈组件的适用场景

---

1. 反馈组件分工一览

组件	用途	典型场景
el-dialog	弹出独立窗口，可包含表单、详情等复杂内容	新增/编辑表单、查看详情
ElMessage	轻量操作结果提示，自动消失	保存成功、校验失败提醒
ElMessageBox	强制用户回答"确定/取消"的模态确认框	删除确认、危险操作
ElNotification	带标题的正式通知，出现在屏幕角落	系统公告、操作简报

记忆口诀：要办事进入对话框，办完事消息一句话，危险事必须亲口确认，重要事通知贴出来。

---

2. el-dialog 对话框

2.1 基础配置

<el-dialog
  v-model="dialogVisible"
  :title="editingId ? '编辑用户' : '新增用户'"
  width="480px"
>
  <!-- 内容（默认插槽） -->
  <el-form>...</el-form>

  <!-- 底部按钮（footer 插槽） -->
  <template #footer>
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="handleSave">保存</el-button>
  </template>
</el-dialog>

• v-model：控制显示/隐藏，绑定布尔值
• title：对话框标题
• width：宽度
• 结构：标题 / 内容区 / footer 插槽（三段式）

2.2 防误关属性

<el-dialog :close-on-click-modal="false" ...>

• 设置后，点击对话框外部的遮罩层不会关闭对话框
• 防止用户在填写表单时误触导致数据丢失

2.3 关闭即销毁

<el-dialog destroy-on-close ...>

• 关闭对话框时销毁内部组件，下次打开重新创建
• 与 resetFields() 作用类似，但二者二选一，不能混用
• 若使用本属性，formRef 在关闭期间为 null，resetFields() 无效

---

3. ElMessage 消息提示

3.1 四种类型

import { ElMessage } from 'element-plus'

ElMessage.success('操作成功')     // 绿色，一切顺利
ElMessage.error('操作失败')       // 红色，出错
ElMessage.warning('请注意')       // 黄色，提醒/警告
ElMessage.info('提示信息')        // 蓝色，中性告知

颜色即态度：成功绿、失败红、提醒黄、中性蓝。

3.2 使用原则

• 在操作真正完成后才调用（成功或失败各一条）
• 不要滥用，一个操作最多一条消息
• 校验不通过属于"提醒"，应使用 warning 而非 error

---

4. ElMessageBox 确认框

4.1 核心用法

ElMessageBox.confirm 返回 Promise，必须使用 try/catch 处理用户的选择。

import { ElMessageBox, ElMessage } from 'element-plus'

async function handleDelete(user) {
  try {
    // 弹出确认框，等待用户选择
    await ElMessageBox.confirm(
      `确定要删除用户「${user.name}」吗？删除后不可恢复！`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    // 用户点击"确定" → 执行删除逻辑
    userList.value = userList.value.filter(u => u.id !== user.id)
    ElMessage.success(`用户「${user.name}」已删除`)
  } catch {
    // 用户点击"取消"或关闭 → 不执行任何操作
    ElMessage.info('已取消删除')
  }
}

4.2 执行流程

• 用户点击「确定」：Promise resolve，await 后面的代码继续执行
• 用户点击「取消」或关闭：Promise reject，进入 catch 块
• 不写 catch 会导致控制台报 Uncaught (in promise) 错误

4.3 多分支处理示例

await ElMessageBox.confirm(...)
if (user.id === 1) {
  // 模拟业务规则：管理员不可删除
  ElMessage.error('系统管理员账号不允许删除')
  return
}
// 正常删除
userList.value = userList.value.filter(u => u.id !== user.id)
ElMessage.success(`已删除`)

---

5. ElNotification 通知

更正式的通知，带标题、出现在屏幕右上角，适合操作结果的"留痕"。

import { ElNotification } from 'element-plus'

ElNotification({
  title: '系统通知',
  message: `用户「${form.name}」已添加`,
  type: 'success',
  duration: 3000
})

与 ElMessage 区别：

	ElMessage	ElNotification
标题	无	有
位置	页面顶部居中	屏幕右上角（可配）
正式度	轻量口播	正式公告

---

6. 常见错误排查

现象	原因	解决办法
确认框点取消后控制台报红	confirm 返回 Promise 被拒绝但未捕获	必须用 try/catch 包裹
删除后列表无变化	filter 条件写反或未赋值	检查 userList.value = ...filter(...)
点击遮罩弹窗直接关闭	未设置 close-on-click-modal="false"	添加该属性
关闭弹窗再打开，表单数据残留	未执行 resetFields()	在 openDialog 开头调用 formRef.value?.resetFields()
多个消息堆叠	同一操作多次调用 ElMessage	每个关键节点只调用一次
校验失败显示红色"错误"	用 error 代替 warning	改用 ElMessage.warning
组件无样式	未引入 Element Plus CSS	import 'element-plus/dist/index.css'