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

第14课 反馈组件对话框、消息与通知掌握el-dialog的进阶用法防误关、关闭销毁合理使用ElMessage的四种口吻给予操作反馈用ElMessageBox.confirm实现删除等危险操作的二次确认了解ElNotification系统通知的用法能够区分四种反馈组件的适用场景1. 反馈组件分工一览组件用途典型场景el-dialog弹出独立窗口可包含表单、详情等复杂内容新增/编辑表单、查看详情ElMessage轻量操作结果提示自动消失保存成功、校验失败提醒ElMessageBox强制用户回答“确定/取消”的模态确认框删除确认、危险操作ElNotification带标题的正式通知出现在屏幕角落系统公告、操作简报记忆口诀要办事进入对话框办完事消息一句话危险事必须亲口确认重要事通知贴出来。2. el-dialog 对话框2.1 基础配置el-dialogv-modeldialogVisible:titleeditingId ? 编辑用户 : 新增用户width480px!-- 内容默认插槽 --el-form.../el-form!-- 底部按钮footer 插槽 --template#footerel-buttonclickdialogVisible false取消/el-buttonel-buttontypeprimaryclickhandleSave保存/el-button/template/el-dialogv-model控制显示/隐藏绑定布尔值title对话框标题width宽度结构标题 / 内容区 / footer 插槽三段式2.2 防误关属性el-dialog:close-on-click-modalfalse...设置后点击对话框外部的遮罩层不会关闭对话框防止用户在填写表单时误触导致数据丢失2.3 关闭即销毁el-dialogdestroy-on-close...关闭对话框时销毁内部组件下次打开重新创建与resetFields()作用类似但二者二选一不能混用若使用本属性formRef在关闭期间为nullresetFields()无效3. ElMessage 消息提示3.1 四种类型import{ElMessage}fromelement-plusElMessage.success(操作成功)// 绿色一切顺利ElMessage.error(操作失败)// 红色出错ElMessage.warning(请注意)// 黄色提醒/警告ElMessage.info(提示信息)// 蓝色中性告知颜色即态度成功绿、失败红、提醒黄、中性蓝。3.2 使用原则在操作真正完成后才调用成功或失败各一条不要滥用一个操作最多一条消息校验不通过属于“提醒”应使用warning而非error4. ElMessageBox 确认框4.1 核心用法ElMessageBox.confirm返回 Promise必须使用 try/catch 处理用户的选择。import{ElMessageBox,ElMessage}fromelement-plusasyncfunctionhandleDelete(user){try{// 弹出确认框等待用户选择awaitElMessageBox.confirm(确定要删除用户「${user.name}」吗删除后不可恢复,删除确认,{confirmButtonText:确定删除,cancelButtonText:取消,type:warning})// 用户点击“确定” → 执行删除逻辑userList.valueuserList.value.filter(uu.id!user.id)ElMessage.success(用户「${user.name}」已删除)}catch{// 用户点击“取消”或关闭 → 不执行任何操作ElMessage.info(已取消删除)}}4.2 执行流程用户点击「确定」Promise resolveawait后面的代码继续执行用户点击「取消」或关闭Promise reject进入catch块不写 catch 会导致控制台报Uncaught (in promise)错误4.3 多分支处理示例awaitElMessageBox.confirm(...)if(user.id1){// 模拟业务规则管理员不可删除ElMessage.error(系统管理员账号不允许删除)return}// 正常删除userList.valueuserList.value.filter(uu.id!user.id)ElMessage.success(已删除)5. ElNotification 通知更正式的通知带标题、出现在屏幕右上角适合操作结果的“留痕”。import{ElNotification}fromelement-plusElNotification({title:系统通知,message:用户「${form.name}」已添加,type:success,duration:3000})与 ElMessage 区别ElMessageElNotification标题无有位置页面顶部居中屏幕右上角可配正式度轻量口播正式公告6. 常见错误排查现象原因解决办法确认框点取消后控制台报红confirm返回 Promise 被拒绝但未捕获必须用try/catch包裹删除后列表无变化filter条件写反或未赋值检查userList.value ...filter(...)点击遮罩弹窗直接关闭未设置close-on-click-modalfalse添加该属性关闭弹窗再打开表单数据残留未执行resetFields()在openDialog开头调用formRef.value?.resetFields()多个消息堆叠同一操作多次调用ElMessage每个关键节点只调用一次校验失败显示红色“错误”用error代替warning改用ElMessage.warning组件无样式未引入 Element Plus CSSimport element-plus/dist/index.css