Message消息提示为啥不显示？代码哪里写错了？

FSD-钰文提问于 2026-03-08 12:29:17 阅读 3

交互

我用 Element Plus 的 Message 组件，点击按钮没反应，控制台也没报错，但就是看不到提示消息。是不是引入方式有问题？

我已经按文档写了，但还是不行，下面是我的代码：

<template>
  <el-button @click="showMsg">提示</el-button>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const showMsg = () => {
  ElMessage('这是一条消息')
}
</script>

我来解答赞 3 收藏

反馈

1 条解答

迷人的仪凡 Lv1

你这代码看起来基本没问题，但有几个常见坑点要排查下：

1. 首先确认项目里安装了element-plus的样式文件，没样式的话消息弹出来但看不见。在main.js或入口文件确保有这行：

import 'element-plus/dist/index.css'

2. 如果是Vite项目，检查vite.config.js里有没有正确配置Element Plus的自动导入。建议改成显式引入更安全（防止注入风险），像这样：

import { ElMessage } from 'element-plus'

app.use(ElMessage)

3. 还有个容易被忽略的点 - 检查下你的项目里是不是有z-index冲突，消息默认是3000，如果被其他组件覆盖了也看不见。可以手动加个style测试：

ElMessage({

  message: '测试消息',

  customClass: 'my-message' // 加个自定义类

})

然后在css里加：

.my-message {

  z-index: 9999 !important;

}

建议按这个顺序排查，通常都是样式没引入的问题。要是还不行，可能是Vue版本兼容性问题，可以试着降级element-plus版本看看。

2026-03-08 13:00