ElMessage 提示样式失效问题

Ranni_l

已于 2023-12-06 10:04:37 修改

阅读量1.5k

点赞数 7

分类专栏：前端文章标签： vue.js 前端

于 2023-10-26 10:22:44 首次发布

本文链接：https://blog.csdn.net/A_sky_/article/details/134049912

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章讲述了作者在使用Vue3和ElementPlus时遇到message样式不生效的问题，原因在于全局已导入并忽略了ElMessage，导致局部导入时产生冲突。解决办法是删除局部对ElMessage的引用。

摘要由CSDN通过智能技术生成

今天在使用vue3 + Element Plus 的时候，遇到 message 样式不生效的问题，但是又没有报错。
未生效图片

import { User, Lock } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { userRegisterService, userLoginService } from '@/api/user.js'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores'
// 登录请求
const userStore = useUserStore()
const login = async () => {
  await form.value.validate()
  // 开始登录
  const { data } = await userLoginService(formModel.value)
  userStore.setToken(data.token)
  ElMessage.success('登录成功')
}

经过排查，原因是已经全局引用了 ElMessage（忘了怎么引入的了）
并且在 .eslintrc.cjs 文件里面已经忽略掉了ElMessage的提示

globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }

然后局内使用的时候，自动生成了引用 ElMessage ，导致冲突样式失效，只要将局内引用删掉即可恢复正常。

import { User, Lock } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { userRegisterService, userLoginService } from '@/api/user.js'
// import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores'