Vue3解决ElementPlus自动导入时ElMessage无法显示的问题
更新时间：2024年03月15日 09:22:45 作者：寒风_冷月
这篇文章主要介绍了Vue3解决ElementPlus自动导入时ElMessage无法显示的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3 ElementPlus自动导入时ElMessage无法显示
问题描述
使用Vue3时，ElementPlus引入方式为自动导入，需要添加ElMessage弹出提示
按照教程进行如下：
import {ElMessage} from 'element-plus'
ElMessage.error('需要填完所有项')但浏览器不报错也不显示，后在网上查看他人相同问题后得知自动导入方式不需要import
解决
删除import行，直接使用ElMessage，成功解决
ElMessage.error('需要填完所有项')
element plus 使用ElMessage不生效或样式出现问题或出现在最底部
如下效果：
产生的原因是
使用了element plus的按需引入，然后在组件中 又
import { ElMessage } from 'element-plus' 引入了一次，就会出现这个问题，
解决的方法
将组件中的引入删除，直接使用
ElMessage.success('Successfully sent ！') 总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue中如何使用$refs和ref属性来操作DOM和组件实例,$refs是一个对象,包含由ref属性注册的DOM元素和组件实例,通过$refs可以在Vue中获取DOM节点、组件实例、组件数据和属性等2025-10-10
在遇到chunk-vendors.js文件的语法错误时,可以尝试在vue.config.js文件中添加transpileDependencies参数进行配置,这通过明确指示哪些依赖需要被babel转译,从而帮助解决编译过程中的语法问题,此方法适用于Vue项目中遇到的相关错误,希望能帮助到遇到同样问题的开发者2024-10-10
在vue3+vite创建的项目中使用vuex，要注意的是vite有部分写法和之前的webpack是不同的，这篇文章主要介绍了vue3+vite中使用vuex的具体步骤,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue引入element-ui之后，页面是空白的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要给大家介绍了关于Vue生命周期介绍和钩子函数的相关资料，对大家学习或者使用vue2具有一定的参考学习价值，需要的朋友们下面随小编一起来看看吧2021-10-10
vue3使用vue-i18n的方法详解(ts中使用$t, vue3不用this)
所谓的vue-i18n国际化方案就是根据它的规则自己建立一套语言字典,对于每一个字（message）都有一个统一的标识符,下面这篇文章主要给大家介绍了关于vue3使用vue-i18n(ts中使用$t, vue3不用this)的相关资料,需要的朋友可以参考下2022-12-12
日常开发中，我们可以用 “拿来主义” 借助Bootstarp现成的一些样式，快速生成我们想要的页面布局，避免书写大量的HTML和CSS代码，省下了许多不必要的时间，可以直接搭配vue使用2022-11-11
Web应用程序中资源分页不仅对性能很有帮助，而且从用户体验的角度来说也是非常有用的。在这篇文章中，将了解如何使用Vue创建动态和可用的分页组件2022-12-12
在开发过程中,绑定账号和电脑的功能可以通过获取电脑的MAC地址实现,下面这篇文章主要介绍了vue前端获取不同客户端mac地址的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vue3全局导入bootstrap5方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论