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

于 2024-08-20 16:43:06 发布
阅读量22 收藏
点赞数 1
文章标签： element plus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongkid/article/details/141362505
版权

按官方配置的按需引入，使用ElMessageBox的时候，样式无法自动引入。

解决方法，引入

import 'element-plus/theme-chalk/el-overlay.css';
import 'element-plus/theme-chalk/el-message-box.css';

注意：import 'element-plus/theme-chalk/el-overlay.css'，网上很多其他的文章少了这个，影响的是灰色的蒙版样式

hongkid
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nuxt配置Element-UI按需引入的操作方法
10-15
主要介绍了Nuxt配置Element-UI按需引入方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
element-plus(element-plus@2.5.5) 本地离线资源
02-05
element-plus@2.5.5 本地离线资源，适用于没有网络连接、搭建自己的cdn等用途。 All files（包含文件） /npm/element-plus@2.5.5/dist /npm/element-plus@2.5.5/es /npm/element-plus@2.5.5/lib /npm/element-...
element plus 按需引入模式 ElMessageBox样式失效解决
qq_43654065的博客
08-15 675
import { ElMessage, ElMessageBox } from "element-plus"; import "element-plus/es/components/message/style/css"; import "element-plus/es/components/message-box/style/css";
vue3项目，按需引入Element-plus ElMessage 样式丢失
qq_34082921的博客
12-18 698
将ElMessage等都加入到.eslintrc globals字段里面。将上述代码导入import部分的代码去掉，直接调用。此时会出现样式丢失问题。
记录-解决element-plus自动引入后ElLoading、ElMessage、ElNotification、ElMessageBox样式丢失的问题
热门推荐
Delete_89x的博客
08-19 1万+
vue3项目中使用element-plus自动引入遇到ElLoading、ElMessage、ElNotification、ElMessageBox样式丢失的问题。
按需引入element-plus中的message和message-box后，缺少样式
weixin_44854962的博客
10-31 1225
1. 使用elenment-ui中的MessageBox 消息弹框时，确认消息。按需引入后没有样式。3. 引入相应的样式即可。
【已解决】Vue3使用Element-plus按需加载时消息弹框ElMessage没有样式
前端界的小学生
06-22 4297
Element-plus在使用ElMessage消息弹框的时候没有样式，按照官方的按需加载的方式引入的。
vue3按需导入element-plus后使用ElMessage报错或样式丢失
m0_37922443的博客
05-18 3283
vue3按需导入element-plus后使用ElMessage报错或样式丢失
element-plus的messageBox样式丢失，main.js重新引入el样式后设置的主题色失效
qq_41421033的博客
05-23 639
main.js重新引入element样式，本人项目使用自动按需引入的方法使用element+ui，并结合使用scss。引入后发现定制的主题色被新引入的样式覆盖了,下面修改了引入的文件, 完美解决。
vue使用element plus引入ElMessage样式失效的问题
qq_46149597的博客
07-07 641
【代码】vue使用element plus引入ElMessage样式失效的问题。
解决element-plus提示组件样式丢失问题
土豆你是马铃薯吗的博客
02-02 1297
解决element-plus提示组件样式丢失问题
Vue-cli4 配置 element-ui 按需引入操作
11-19
Vue-cli4 配置 Element-UI 按需引入的操作是一项关键的性能优化技术，它允许开发者只引入项目中实际使用的组件，减少打包后文件的大小，提高应用的加载速度。以下将详细介绍整个配置过程： ### 1. Node.js 和 Vue ...
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
JVC AV-29L31彩电维修手册和图纸.rar
08-19
JVC AV-29L31彩电维修手册和图纸
树状数组：数据结构中的瑞士军刀
最新发布
08-19
数据结构是计算机科学中的一个基本概念，它指的是数据的组织、管理和存储方式，以及对数据的操作。数据结构使得数据的访问和修改更加高效和有序。常见的数据结构包括： 1. **数组**（Array）：一种线性数据结构，可以存储相同类型的元素，并通过索引访问。 2. **链表**（Linked List）：一种线性数据结构，由一系列节点组成，每个节点包含数据部分和指向下一个节点的指针。 3. **栈**（Stack）：一种后进先出（LIFO, Last In First Out）的数据结构，只能在一端进行添加或删除操作。 4. **队列**（Queue）：一种先进先出（FIFO, First In First Out）的数据结构，允许在一端添加元素，在另一端删除元素。 5. **哈希表**（Hash Table）：通过键值对存储数据的数据结构，可以快速地通过键来访问数据。 6. **树**（Tree）：一种层次结构的数据结构，每个节点有零个或多个子节点，通常用于表示具有层次关系的数据。 7. **图**（Graph）：由顶点（节点）和边组成，可以表示复杂的关系和网络结构。 每种数据结构都有其
JVC AV-21H1E彩电电路原理图.rar
08-19
JVC AV-21H1E彩电电路原理图
基于uniapp+springboot的校园失物招领系统的设计与实现--pf.zip
08-19
互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用校园失物招领系统可以有效管理，使信息管理能够更加科学和规范。 校园失物招领系统使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理校园失物招领系统信息，查看校园失物招领系统信息，管理校园失物招领系统。 总之，校园失物招领系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
基于Android日程管理APP设计与实现.docx
08-19
基于Android日程管理APP设计与实现.docx
element-plus按需引入使用button组件报错
05-18
如果你使用了按需引入方式，在使用 `button` 组件的时候出现了报错，可能是因为没有正确配置 babel 插件导致的。具体来说，你需要将 `babel-plugin-component` 插件添加到 babel 配置中。 以下是一个示例的 `.babelrc` 文件内容： ```json { "presets": [ "@vue/cli-plugin-babel/preset" ], "plugins": [ [ "component", { "libraryName": "element-plus", "styleLibraryName": "theme-chalk" } ] ] } ``` 如果你使用的是 Vue CLI 3，可以将配置直接写在 `vue.config.js` 文件中： ```js module.exports = { transpileDependencies: [ 'element-plus' ], chainWebpack: config => { config.module .rule('js') .include .add(/element-plus/) .end() .use('babel') .loader('babel-loader') .tap(options => { // 修改它的选项... return options }) } } ``` 注意，在按需引入组件时，需要使用 `kebab-case` 的方式引入，如下所示： ```html <el-button>Click me</el-button> ``` 希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值