vue3中ElMessage样式失效问题

最新推荐文章于 2025-05-30 11:15:27 发布

和月

最新推荐文章于 2025-05-30 11:15:27 发布

阅读量1.2k

点赞数 15

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言 vue

本文链接：https://blog.csdn.net/weixin_59367598/article/details/136405115

问题描述：

vue3 中使用 ElMessage提示框，有时候会这样在页面最下面显示

解决方案：

在main.js中重新引入样式即可

// message 提示框样式丢失问题
import 'element-plus/theme-chalk/src/message-box.scss'
import 'element-plus/theme-chalk/src/message.scss'

完美解决。

感谢观看！！！

萌新小白一枚，不喜勿喷，谢谢！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

和月

关注关注

15
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue3 - Element Plus使用消息提示ElMessage样式出错或无法显示，自动导入或按需引入message不显示无效果，解决el-message引入不显示或使用报错无法使用（详细排查）

🏆 前端领域优质创作者

06-21

3057

vue3，解决element plus message不显示，vue3 element plus ElMessage引入无效或不显示样式报错，Vue3使用Element-plus按需加载时消息弹框ElMessage没有样式，浏览器不报错也不显示，使用element-plus中的ElMessage样式出错，Message 消息提示，ElMessage，el-message，Vite按需引入，使用element-plus中的ElMessage样式出错，样式并没有生效，样式错乱直接在页面上显示出来了，vue3+

Vue3+Element Plus中dialog层级显示出错

weixin_44079946的博客

04-04

2168

dialog层级错乱

参与评论您还未登录，请先登录后发表或查看评论

ElMessage 提示样式失效问题

A_sky_的博客

10-26

2156

今天在使用vue3 + Element Plus 的时候，遇到 message 样式不生效的问题，但是又没有报错。

vue3 ElMessage提示语换行渲染

最新发布

weixin_48420104的博客

05-30

346

ElMessage.error默认忽略换行符\n，要实现换行需使用<br>标签并开启dangerouslyUseHTMLString选项。例如：ElMessage.error({message:'发布失败！<br>'+data.msg,dangerouslyUseHTMLString:true})。这样就能显示多行错误提示信息。

vue3 elmessage 不生效【解决方法】

m0_64788735的博客

06-16

662

我是在Element-plus找组件用时，直接复制，不报错但不生效，后面发现忘记引用样式css了。//引入Elmessage的css样式文件。在main.js中引入样式即可解决问题。

Vue3+Element-Plus中ELMessage样式丢失处理

weixin_42202992的博客

02-29

2481

Vu3+Element-Plus项目中,element-plus使用按需引入有时会出现样式失效和在vscode中使用会报错[找不到名称“ElMessage”。ts(2304)]错误处理方法

vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）

M31Gargantua的博客

03-12

5670

vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）

使用element-plus按需引入后ElMessageBox样式丢失的问题

XUELINGMM的博客

05-18

4115

vue3项目中使用element-plus按需引入遇到ElMessageBox样式丢失。

vue3 按需导入elementplusElmessage失效

03-17

好的，我现在需要解决用户在Vue3项目中按需导入Element Plus的ElMessage组件时遇到的问题。用户提到样式失效或者功能不可用，我需要根据提供的引用信息来整理解决方案。首先，根据引用[3]，用户可能手动导入了...

Vue3后台管理项目模板(初始化)

njkl2166的博客

01-02

860

通过npm run lint去检测语法，如果出现不规范格式,通过npm run fix 修改。eslint和prettier这俩兄弟一个保证Js代码质量，一个保证JS代码美观。可格式化css代码，检查css语法错误与不合理的写法，指定。2. 根目录新建文件.prettierrc.json添加规则。3. 根目录新建.stylelintignore忽略文件。根目录新建文件.stylelintrc.cjs配置文件。3. 根目录新建.eslintignore忽略文件。2. 修改.eslintrc.cjs文件。

Vue3——Tinymce6富文本编辑器的使用方法

Bonsoir777的博客

04-10

2197

vue3中tinymce中的使用方法

vue使用element plus引入ElMessage样式失效的问题

qq_46149597的博客

07-07

866

【代码】vue使用element plus引入ElMessage样式失效的问题。

Element-plus按需导入时ElMessage失效（Eslint9.x,Vue3）

m0_72642362的博客

03-02

529

首先明确一点，如果使用element-plus的按需自动导入(如下图)，在用到Message消息提示的时候，不需要去使用import {ElMessage} from 'element-plus'，如果手动在某个组件中使用import {ElMessage} from 'element-plus'，则会出现这个消息提示失败的现象，这时候只需要删去引入或者是注释掉，同时如果用了Eslint，这时候会报错，我们需要在Eslint（我用的是9.20.1版本）的配置文件中加上全局变量，

ElMessageBox样式丢失

u010616779的博客

10-02

547

最后找到问题，删除引用即可，直接使用即可。然后出来是样式丢失了。

el-message样式修改无效怎么搞？VUE3.0

m0_58587536的博客

07-07

3559

el-message样式修改无效怎么搞？VUE3.0，使用 --el-message-bg-xxx 可以修改消息提示文字以及背景、边框的颜色

element-plus 中 el-message等无法引入样式

qq_36759972的博客

09-09

3367

elementplus el-message没有样式文件

vue3按需导入element-plus后使用ElMessage报错或样式丢失

m0_37922443的博客

05-18

3959

vue3按需导入element-plus后使用ElMessage报错或样式丢失

使用ElementUI的Message不起效果的解决办法

夏天的博客

06-08

7211

使用ElementUI的Message不起效果的解决办法

解决vue3使用element-plus按需加载ElMessage没有样式问题

weixin_52017993的博客

09-03

1249

在tsconfig.json中的include字段中添加auto-imports.d.ts。按照element-plus方法import ElMessage进来，样式不会生效。如果项目中有使用TypeScript，那么会提示ElMessage不存在问题。将import引入去除，直接使用ElMessage。就可以了,这样就会自动引入了。