Element-plus自动导入组件，导致MessageBox组件样式丢失

最新推荐文章于 2025-02-25 04:42:58 发布

Gnined

最新推荐文章于 2025-02-25 04:42:58 发布

阅读量949

点赞数 4

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/Gnined/article/details/136666947

版权

文章讲述了在使用Element-plus的MessageBox时遇到样式不完整的问题，定位在页面左下角。解决方法是在main.ts入口文件中手动导入MessageBox和message.scss样式文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Element-plus的MessageBox发现样式不完整，且出现在页面左下角。

解决方式：在main.ts入口文件中手动引入MessageBox的样式文件

import 'element-plus/theme-chalk/src/message-box.scss'
import 'element-plus/theme-chalk/src/message.scss'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Gnined

关注关注

4
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue3 - Element Plus 消息弹框MessageBox组件防止多次弹出问题，解决多次弹框问题让其无论执行多少次都只弹出来一次，设置对话框无论执行多少次最终只弹一次（强力搞定重复弹窗问题）

王佳斌

10-23

8866

vue3，element-plus，MessageBox，消息提示始终只出现一个，ElementPlus弹出框多次弹出问题，解决MessageBox消息弹框重复弹出，无论调用多少次最终只让弹出来一个，axios封装请求拦截器时多个API请求接口导致弹框多次出现如何只出现一次，如何让ElementPlus的Message消息提示每次只弹出一个，axios全局封装登录状态登录失效未登录时提示登录框多次触发怎么办，只有第一次弹出调用组件接口，后面弹出不在调用接口问题解决，消息弹窗不重复弹出，最新最好用的解决办法

element-ui中messageBox的使用

seimeii的博客

12-23

1779

1、第一步引入 import { MessageBox } from 'element-ui'; 2、第二步使用 function confirm(options = {}) { let { title, message, ...ops } = options; return MessageBox.confirm(message, title, { closeOnClickModal: false, closeOnPressEscape: false,

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

按需引入 ElMessage，没有样式且类型检查失败

阿城的博客

11-26

2378

虽然开发环境可以忍着红线不去管它，可以正常使用，但打包构建会失败。可以看到 vscode 可以给出 ElNotification 的类型提示，说明 ts 已经识别，但 eslint 仍然检查失败。Element-plus 在使用 ElMessage 消息弹框的时候没有样式，按照官方的按需加载的方式引入的。现在 ts 已经不抱类型错误，但如果配置了 eslint，则 eslint 就会开始报错了。配置开启后，默认就会在 vite 文件同级目录中自动生成对应的。其实自动导入已经有了 ts 的类型声明，它就在。

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

hongkid的专栏

08-20

760

注意：import 'element-plus/theme-chalk/el-overlay.css'，网上很多其他的文章少了这个，影响的是灰色的蒙版样式。按官方配置的按需引入，使用ElMessageBox的时候，样式无法自动引入。

ElementPluss使用消息类组件样式缺失的问题（ElLoading、ElMessage、ElNotification、ElMessageBox）

最新发布

weixin_65039404的博客

02-25

481

原因是我们已经配置了按需自动引入了，所以不需要再手动import，虽然会报错，但资源确实是引入了，这是编译器的问题，编译器看不出来你自动引入了，因为那个插件的引入是隐式的，在编译器看来你从来就没定义过ElNotfication这个东西，所以报错（至于手动引入为啥不带样式文件我不清楚，貌似需要单独引入样式文件）。那么问题就缩小到让编译器忽略这个错误上了，这方式就很多很多了。可以看到我将常用的消息组件的名称都声明了全局变量，让编译器认为此变量在文件中不需要再声明，如此即可让编译器忽略掉此问题。

自动导入时，Element-plus Message Box组件样式丢失

10-09

648

当使用Element-plus ElMessageBox弹出时，样式丢失。具体表现为弹窗显示在左上角，背景页面均为透明。

ElMessageBox样式丢失

u010616779的博客

10-02

489

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

Element-plus组件库基础组件使用

ngczx的博客

08-28

1638

单体页面常用的element-ui组件，配合vue3使用

element-plus ElMessageBox 实现复制功能，动态点击html元素不生效解决

qq_42859450的博客

11-04

2118

Vue3实现复制功能vue-clipboard3

Element-ui最常用组件排行榜非官方统计

m0_37686209的博客

06-13

1824

element-ui中常用组件组件使用说明官方文档链接 https://element.eleme.cn/#/zh-CN/component/button

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

weixin_42202992的博客

02-29

2321

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

element-plus的messageBox样式丢失，main.js重新引入el样式后设置的主题色失效

qq_41421033的博客

05-23

836

main.js重新引入element样式，本人项目使用自动按需引入的方法使用element+ui，并结合使用scss。引入后发现定制的主题色被新引入的样式覆盖了,下面修改了引入的文件, 完美解决。

vue3中ElMessage样式失效问题

weixin_59367598的博客

03-01

1196

vue3中ElMessage样式失效问题

Element Plus组件库使用组件自动导入后样式不生效的问题

qq_45569925的博客

05-15

2012

由此可以看出虽然按照官网上的步骤进行配置了，但是样式并没有因此而生效。错误原因：是因为在使用以下命令进行依赖的安装的时候默认安装的是最新版的。配置完成后，去组件中去测试组件库中的button组件的样式是否生效。的版本安装为0.26.0即可。然后重新运行项目查看结果。然后运行代码查看效果。

Element Plus 配置自动按需引入后，手动引入组件，组件样式丢失

szw-yunie的博客

06-25

3097

我使用到了一个 ElTree 组件，把官方实例代码拷过来后，怎么看都跟官网文档上的样式不一样。F12一看，对应的html标签里有类名，但是在style里面却找不到类名对应的样式。于是但是这样做却也是。在网上一顿搜索也没找到解决办法，甚至连样式丢失的原因也找不到，真是见鬼。

element-plus ElMessageBox引入后样式失效

Cynthia_Yue27的博客

03-18

2358

使用的引入方式是vite里边配置，自动引入但部分样式可以显示，消息弹窗ElMessageBox样式失效。参考网上给出的方案，再引入一遍css // main.js import 'element-plus/theme-chalk/index.css' 但仍提示未找到相关文件删除element-plus包，再次重新安装解决问题 ...

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

weixin_52017993的博客

09-03

1152

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

二次封装element-plus messagebox出现z-index

01-18

### 解决二次封装 Element Plus MessageBox 时的 z-index 样式冲突在 Vue 组件中引入 `ElMessageBox` 后，如果要处理 `z-index` 的样式冲突问题，可以采取以下方法： #### 方法一：全局设置 z-index 值通过 CSS 或者 SCSS 设置一个较高的默认 `z-index` 来覆盖其他可能存在的层叠上下文。这可以通过创建一个新的样式文件来实现，在该文件内指定 `.el-message-box__wrapper` 类的选择器优先级。 ```css /* styles/override.css */ .el-message-box__wrapper { z-index: 9999 !important; /* 使用高数值并强制应用 */ } ``` 确保此样式表被正确加载到项目中[^1]。 #### 方法二：动态调整 z-index 属性当调用 `ElMessageBox.alert()` 或类似的函数展示对话框之前，计算当前页面上最高的 `z-index` 并为其加一作为新的值传递给 message box 实例。这种方法更加灵活但也更复杂一点因为它涉及到 JavaScript 编程逻辑。 ```javascript // utils/zIndexHelper.js export function getMaxZIndex() { let max = 0; const elements = document.querySelectorAll('*'); Array.from(elements).forEach((element) => { const zIndex = parseInt(window.getComputedStyle(element).getPropertyValue('z-index'), 10); if (!isNaN(zIndex)) { max = Math.max(max, zIndex); } }); return max + 1; } import { ElMessageBox } from 'element-plus'; import { getMaxZIndex } from './utils/zIndexHelper'; const options = { title: '提示', message: h(App), customClass: `custom-class-name`, }; options.customStyle = ` .el-message-box__wrapper { z-index: ${getMaxZIndex()} !important; } `; await ElMessageBox.confirm('', '', options)[^2]; ``` 以上两种方式都可以有效地解决由于不同插件之间相互作用而引起的视觉遮挡现象。选择哪种取决于具体的应用场景和个人偏好。