Vue里用Element Plus的警告提示为啥不显示？

子晴提问于 2026-03-15 21:51:23 阅读 68

交互

我在用Element Plus做表单验证，想在输入不合法时弹个警告提示，但调用ElMessage.warning()完全没反应，控制台也没报错，这是啥情况？

我确认已经全局引入了Element Plus，其他组件比如按钮都能正常用。下面是我写的简单示例：

<template>
  <el-input v-model="input" placeholder="请输入邮箱" />
  <el-button @click="validate">验证</el-button>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const input = ref('')
const validate = () => {
  if (!input.value.includes('@')) {
    ElMessage.warning('请输入正确的邮箱格式！')
  }
}
</script>

反馈机制警告提示

我来解答赞 5 收藏

反馈

1 条解答

程序员秀花 Lv1

大概率是你没引入Element Plus的样式文件。消息组件的DOM是渲染出来了，但没样式所以看不见。

在main.js里加一行：

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

如果你是按需引入的，那需要单独引入message样式：

import 'element-plus/es/components/message/style/css'

2026-03-17 14:09