解决 ElementUI 在按需引入时ElMessage信息不弹出的问题

2023年5月16日 597点热度 0人点赞 0条评论

在使用 element-plus 组件库的时候,因为我是 Vite 下进行按需引入的,然后发现在使用 ElMessage 组件时无法弹出消息框,也没有错误、警告日志打印;翻了半天 element-plus 按需引入文档,也没有额外提示说需要如何做。搜索了半天发现关键字 CSS ,难道按需引入的时候还需要引入 CSS 吗?文档也没有说啊;然后我就在文档中全局搜索了 CSS 关键字,发现在手动导入时有个提示(应该是导入提示,但是这个缩进就很迷,让人分不清到底是什么鬼)

解决 ElementUI 在按需引入时ElMessage信息不弹出的问题

问题解决

按图中的提示 如果使用 unplugin-element-plus 并且只使用组件 API,你需要手动导入样式。 而像ElMessageMessageBoxNotification 这些都是使用组件 API 的,所以都需要导入;

导入方法一:

哪里需要就在哪里导入 import 'element-plus/es/components/message/style/css'

如在有弹出的页面,都需要一个个引入方法
import 'element-plus/es/components/message/style/css'
import {ElMessage} from "element-plus";

导入方法二:

每次导入太麻烦,我们可以直接在 Vue 的根文件中 如 App.vue 中引入 import 'element-plus/es/components/message/style/css' 这样就只需要引入一次,后续在任何地方都可以使用。

 

帮助教程

提供最新的帮助教程,方便使用。

文章评论