Element-Plus ElMessage、Loading组件在自动导入的情况下不显示

cccs7 Lv5
  2023-08-01 00:03:22 2023-08-01 00:03 Created   2023-08-01 00:24:41 2023-08-01 00:24 Updated      228 Words  1 Mins  

今天在使用 Vue3 + Element-Plus 的时候，根据官方文档的引导，使用了 推荐的 组件自动导入的方式

官方文档： https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5

在使用其他的 组件的时候一切正常，比如 el-button、el-form 等，但是在 使用 ElMessage 时候，无法显示 ，控制台中也并无报错信息。

1
2
3
import {ElMessage} from 'elememt-plus'
ElMessage.info('...')
ElMessage.error('...')

反复调试后发现，提示在屏幕左边出现，但并无样式，说明节点已经挂载，样式未生效，通过添加对应的 css 样式代码后正常

在 main.js/ts 中添加以下代码

1
import 'element-plus/theme-chalk/el-message.css'

对于这种 以服务的方式 进行调用的组件，我们需要在 main.js 中手动引入相关的 css 代码

  • Title: Element-Plus ElMessage、Loading组件在自动导入的情况下不显示
  • Author: cccs7
  • Created at: 2023-08-01 00:03:22
  • Updated at: 2023-08-01 00:24:41
  • Link: https://blog.cccs7.icu/2023/08/01/Element-Plus-ElMessage、Loading组件在自动导入的情况下不显示/
  • License: This work is licensed under CC BY-NC-SA 4.0.
 Comments
On this page
Element-Plus ElMessage、Loading组件在自动导入的情况下不显示