按需引入element-plus中的message和message-box后，缺少样式

已于 2023-10-31 23:05:03 修改
阅读量1.8k 收藏
点赞数 3
文章标签： javascript ecmascript elementui
于 2023-10-31 23:00:28 首次发布
文章讲述了在使用Element-UI中的MessageBox进行消息弹框时，确认按钮无样式的问题，通过引入相应CSS样式文件解决，并提供了相关代码示例。

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

1. 使用elenment-ui中的MessageBox 消息弹框时，确认消息。按需引入后没有样式。

2. 原代码

const open = () => {
        ElMessageBox.confirm(
          '该操作将永久删除该用户，是否继续?',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            ElMessage({
              type: 'success',
              message: 'Delete completed'
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: 'Delete canceled'
            })
          })
      }

3. 引入相应的样式即可。

import { ElMessage, ElMessageBox } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import 'element-plus/theme-chalk/el-message-box.css'
Vue3 - Element Plus使用消息提示ElMessage样式出错或无法显示，自动导入或按需引入message不显示无效果，解决el-message引入不显示或使用报错无法使用（详细排查）
🏆 前端领域优质创作者
06-21 3042
vue3，解决element plus message不显示，vue3 element plus ElMessage引入无效或不显示 样式报错，Vue3使用Element-plus按需加载时消息弹框ElMessage没有样式，浏览器不报错也不显示，使用element-plus中的ElMessage样式出错，Message 消息提示，ElMessage，el-message，Vite按需引入，使用element-plus中的ElMessage样式出错，样式并没有生效，样式错乱直接在页面上显示出来了，vue3+
element-plus源码解析Message组件功能实现（包含scss、ts、vue)文件解析（一）--超详细的
qq_68073427的博客
07-19 944
element-plus源码解析Message组件功能实现（包含scss、ts、vue)文件解析（一），帮助你更好的理解elementplus组件源码
解决Element message不显示样式的问题
linyiwei314247870的博客
09-23 774
element-plus
按需引入 ElMessage，没有样式且类型检查失败
阿城的博客
11-26 2483
虽然开发环境可以忍着红线不去管它，可以正常使用，但打包构建会失败。可以看到 vscode 可以给出 ElNotification 的类型提示，说明 ts 已经识别，但 eslint 仍然检查失败。Element-plus 在使用 ElMessage 消息弹框的时候没有样式，按照官方的按需加载的方式引入的。现在 ts 已经不抱类型错误，但如果配置了 eslint，则 eslint 就会开始报错了。配置开启后，默认就会在 vite 文件同级目录中自动生成对应的。其实自动导入已经有了 ts 的类型声明，它就在。
【已解决】Vue3使用Element-plus按需加载时消息弹框ElMessage没有样式
前端界的小学生
06-22 5448
Element-plus在使用ElMessage消息弹框的时候没有样式，按照官方的按需加载的方式引入的。
Vue3+Element-Plus中ELMessage样式丢失处理
weixin_42202992的博客
02-29 2481
Vu3+Element-Plus项目中,element-plus使用按需引入有时会出现样式失效和在vscode中使用会报错[找不到名称“ElMessage”。ts(2304)]错误处理方法
ElementPluss使用消息类组件样式缺失的问题（ElLoading、ElMessage、ElNotification、ElMessageBox）
weixin_65039404的博客
02-25 744
原因是我们已经配置了按需自动引入了，所以不需要再手动import，虽然会报错，但资源确实是引入了，这是编译器的问题，编译器看不出来你自动引入了，因为那个插件的引入是隐式的，在编译器看来你从来就没定义过ElNotfication这个东西，所以报错（至于手动引入为啥不带样式文件我不清楚，貌似需要单独引入样式文件）。那么问题就缩小到让编译器忽略这个错误上了，这方式就很多很多了。可以看到我将常用的消息组件的名称都声明了全局变量，让编译器认为此变量在文件中不需要再声明，如此即可让编译器忽略掉此问题。
element-plus 中 el-message等无法引入样式
qq_36759972的博客
09-09 3366
elementplus el-message没有样式文件
基于Vue3 + Typescript 封装 Element-Plus 组件
每天都要努力学习哦~~
06-28 986
了解最新的 Vue3 及相关技术 & 优势具备经典组件的设计与开发，提升架构思维和代码设计能力。
Vue3 + Element-Plus + vue-draggable-plus 实现图片拖拽排序和图片上传到阿里云 OSS 父组件实现真正上传（最新保姆级）
一名全栈小白的博客
12-15 897
Vue3 + Element-Plus + vue-draggable-plus 实现图片拖拽排序和图片上传到阿里云 OSS（最新保姆级）
使用Vue.js和Element-UI做一个简单登录页面的实例
10-18
在这篇文章中，作者讲述了如何利用Vue.js和Element-UI框架共同制作一个简单登录页面的实例。Vue.js是一个构建用户界面的渐进式JavaScript框架，而Element-UI是基于Vue 2.0的桌面端组件库，提供了丰富的组件以帮助...
(el-Date-Picker)操作(不使用 ts)：Element-plus 中 DatePicker 组件的使用及输出想要日期格式需求的解决过程
狮子座的男孩
08-08 1554
注意：此时是手动切换过日期的值，否则下发的数据依旧是。注意：此时是手动切换过日期的值，否则下发的数据依旧是。注意：此时是手动切换过日期的值，否则下发的数据依旧是。注意：此时是手动切换过日期的值，否则下发的数据依旧是。注意：此时是手动切换过日期的值，否则下发的数据依旧是。注意：此时是手动切换过日期的值，否则下发的数据依旧是。注意：此时是手动切换过日期的值，否则下发的数据都是。注意：此时是手动切换过日期的值，否则下发的数据都是。注意：此时是手动切换过日期的值，否则下发的数据都是。
Element-plus组件库的消息弹出框没有样式（或者样式错误）
qq_51389038的博客
10-10 1034
直接引入样式就行了。
element plus 按需引入模式 ElMessageBox样式失效解决
qq_43654065的博客
08-15 1020
import { ElMessage, ElMessageBox } from "element-plus"; import "element-plus/es/components/message/style/css"; import "element-plus/es/components/message-box/style/css";
使用element-plus按需引入后ElMessageBox样式丢失的问题
XUELINGMM的博客
05-18 4113
vue3项目中使用element-plus按需引入遇到ElMessageBox样式丢失。
vue3中element-plus的一些消息提示框，弹出框没有样式效果
kanno的博客
02-07 2229
vue3中element-plus的一些消息提示框，弹出框没有样式效果，比如消息提示框、消息弹出框、抽屉等等
Element Plus 配置自动按需引入后，手动引入组件，组件样式丢失
szw-yunie的博客
06-25 3293
我使用到了一个 ElTree 组件，把官方实例代码拷过来后，怎么看都跟官网文档上的样式不一样。F12一看，对应的html标签里有类名，但是在style里面却找不到类名对应的样式。于是但是这样做却也是。在网上一顿搜索也没找到解决办法，甚至连样式丢失的原因也找不到，真是见鬼。
Element-plus组件库的MessageBox 消息弹框组件自定义样式的坑(样式名称添加上了，但没有对应样式)
m0_51056513的博客
08-17 1808
只作用在该页面组件内，而MessageBox组件被创建在根页面中，所以在该页面中的样式不起作用。，该样式的.my-confirm-button被添加到了MessageBox组件中，但是。中，注意，只把该css样式代码移动到根页面就可以了，页面起作用了，问题至此解决了！如此便发现了问题，因为我的页面用的是。样式移到App.vue的。
elementui-plus中message-box弹出框的appendTo用法示例
最新发布
06-06
<think>根据用户提供的系统级指令和当前需求：1.用户询问的是ElementUIPlus（现称ElementPlus）中MessageBox组件的appendTo属性用法示例。2.需要提供结构清晰的中文回答。3.回答中要使用正确的LaTeX格式（但此问题可能涉及较少数学公式，若有变量名等则用行内格式）。4.生成相关问题。分析：-ElementPlus的MessageBox是一个对话框组件，通常用于确认消息、提交内容等。-appendTo属性用于指定MessageBox的挂载位置（DOM节点），默认是append到document.body，但在某些情况下可能需要挂载到特定容器内（例如在嵌套DOM结构中避免样式冲突）。计划回答结构：1.解释appendTo属性的作用和适用场景。2.提供一个基础示例（默认情况）。3.展示appendTo的使用示例（如指定挂载到某个特定元素）。4.可能需要注意的事项（如样式问题、定位问题等）。5.生成相关问题。注意：由于用户需求明确要求示例，因此重点放在代码示例上。使用Vue3的语法（ElementPlus基于Vue3）。由于无法实际运行代码，示例代码主要展示用法。</think> ### ElementUI Plus MessageBox `appendTo` 属性使用指南 在 ElementUI Plus (Element Plus) 中，`MessageBox` 组件的 `appendTo` 属性用于控制对话框的挂载位置。默认情况下，弹出框会挂载到 `<body>` 内，但通过 `appendTo` 可以指定挂载到特定 DOM 节点。 #### 📌 基本语法 ```javascript this.$confirm('确认删除此项吗？', '提示', { appendTo: document.querySelector('.custom-container'), // 指定挂载点 callback: action => { if (action === 'confirm') { // 删除操作 } } }) ``` #### 🧩 使用场景示例 1. **避免样式冲突** 当需要限制弹出框的 CSS 作用域时： ```html <div class="dialog-container"> <el-button @click="openMsgBox">打开消息框</el-button> </div> <script> export default { methods: { openMsgBox() { this.$alert('内容将挂载到 .dialog-container', '提示', { appendTo: document.querySelector('.dialog-container') }) } } } </script> ``` 2. **嵌套布局控制** 在复杂布局中保证弹出框正确定位： ```javascript this.$prompt('请输入邮箱', '验证', { appendTo: this.$refs.formLayout.$el, // 挂载到Vue组件实例 inputPattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, inputErrorMessage: '邮箱格式错误' }) ``` 3. **动态容器挂载** 结合 Vue 的 ref 动态指定容器： ```javascript export default { mounted() { this.container = document.getElementById('msgbox-root') }, methods: { showBox() { this.$confirm('确定提交吗？', { appendTo: this.container, distinguishCancelAndClose: true }) } } } ``` #### ⚠️ 注意事项 1. `appendTo` 接受 DOM 元素作为值： ```javascript appendTo: document.getElementById('custom-root') // 或 appendTo: this.$refs.containerElement ``` 2. 常见错误： ```javascript // 错误：传入的是选择器字符串而非DOM元素 appendTo: '.container' // ✘ 无效 appendTo: document.querySelector('.container') // ✔ 正确 ``` 3. 特殊场景下可能需要配合 CSS 使用： ```css /* 当挂载到特定容器时需要调整定位 */ .dialog-container .el-message-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` [^1]: 示例参考 Element Plus 官方文档中组件挂载部分 [^2]: 基于 Vue 生命周期中 DOM 元素获取的最佳实践
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值