ElementPlus的Message消息提示组件是日常后台开发中使用频率极高的功能之一，操作成功、校验失败、网络异常，几乎都靠它来给用户反馈。不过这个组件虽然看起来只是弹一条消息那么简单，实际使用中踩坑的人却不在少数。有人遇到样式全部丢失、弹出来纯白一片，有人遇到消息不关闭、点一次弹七八个，还有人按需引入后直接报错说找不到组件。这篇文章就把ElMessage的正确用法和常见问题一次性梳理清楚。
一、ElMessage的基本用法
ElMessage是一个函数式组件，不需要在模板中写标签，直接在js代码里调用即可。最基础的写法是传入一个对象：
ElMessage('这是一条消息提示')这种字符串简写方式只能弹出默认样式的info类型，更多时候我们建议使用对象写法，可以配置消息类型、持续时间和是否可关闭等参数。常用的类型有success、warning、info、error四种，分别对应绿、黄、灰、红四种背景色，在视觉上能够快速区分消息的性质。
除了基本配置，还有几个参数值得留意。showClose控制是否显示关闭按钮，默认为false；duration控制消息显示的时长，单位毫秒，默认3000，如果设置为0则表示不会自动关闭，必须手动点关闭按钮才行；grouping参数开启后相同内容的消息会被合并，只显示一条并更新计数，这个参数在防止消息堆叠方面非常实用；offset可以设置消息距离窗口顶部的偏移量，当页面顶部有固定导航栏时适当调整这个值能避免遮挡。
二、引入方式与样式问题
Message最经典的报错场景就是按需引入时的样式丢失。如果你使用unplugin-auto-import配合unplugin-vue-components来自动导入组件，会发现ElMessage虽然能正常弹出，但完全没有背景色，就是一坨没有样式的文字飘在页面顶部。这是因为Message属于函数式组件，它是通过js直接调用的，自动导入插件只能识别模板中使用的组件，无法为js调用的函数自动引入样式。
解决方式有几种。第一种是在vite或webpack配置中给ElementPlus的resolver加上importStyle配置，同时配合unplugin-element-plus这类插件来处理函数式组件的样式。第二种方式更简单直接，在main.js中手动引入message的样式文件，例如从element-plus的es目录下引入对应组件的css。第三种是索性全局完整引入ElementPlus，样式一次性全部加载，虽然打包体积会大一些，但省心。
另外要注意，如果项目开启了按需引入且使用了暗黑模式或者自定义主题，样式覆盖的顺序也需要检查，有时候自定义样式被组件库默认样式覆盖，也会出现显示异常的情况。
三、常见错误与排查思路
消息不自动关闭通常是duration被误设为0，或者代码里把duration写成了字符串类型导致判断异常。还有种情况是组件版本差异，某些旧版本的写法在新版本中行为发生了变化，建议升级后仔细对照官方文档。
重复弹出堆积的问题在按钮快速连点时特别明显，用户点三次提交按钮就弹三条一样的成功提示。除了加防抖处理外，直接开启grouping参数是最省事的方案，相同内容的提示会被合并成一条。也可以自己封装一个全局的消息方法，在内部维护一个变量控制弹出的频率。
在setup之外调用报错也经常出现。比如你在axios的拦截器文件里直接调用ElMessage，却忘了引入，或者项目里混用了element-ui和element-plus两个库，导致调用的是老版本的方法。正确做法是确保从element-plus包中引入ElMessage，并且项目里不要同时残留element-ui的依赖。
还有一种隐蔽的问题是message参数传入了对象。ElMessage的message字段期待字符串或者VNode，如果你把接口返回的整个response对象直接传进去，页面可能渲染出object字样或者直接空白。正确的做法是取response里的具体字段，比如res.message或者res.data.msg，必要时先用typeof判断一下数据类型。
四、使用建议与最佳实践
在实际项目中，推荐对ElMessage做一层简单的二次封装，统一消息文案风格、默认时长和弹出位置，避免散落在各处的调用参数五花八门。封装时可以定义几个语义化的方法，例如成功提示、错误提示、警告提示，内部再统一调用ElMessage，这样后期要调整全局的提示行为只需要改一处。
对于需要用户确认的操作，Message并不合适，它只负责展示不能交互，这类场景应该使用ElMessageBox的confirm方法。而需要长时间停留在页面上展示操作结果日志的场景，ElNotification会更合适，它支持标题和正文，显示位置也更灵活。选对组件比后期补救重要得多。
最后提醒一点，Message的回调函数onClose在某些版本中参数行为有变化，如果你的业务依赖关闭回调做状态清理，升级ElementPlus版本后务必回归测试一下相关功能，避免出现回调不触发或者触发时机不对的问题。
五、小结
ElMessage用法本身不复杂，绝大多数问题都集中在引入方式和参数细节上。记住几个要点：按需引入要单独处理函数式组件的样式，duration为0不会自动关闭，grouping可以防止消息堆叠，message字段只能传字符串或VNode。做好二次封装，规范调用方式，这个小组件就能稳定地为你的项目服务。
ElementPlus Message组件消息提示用法前端组件库修改时间：2026-09-13 04:58:25