elementui按需引入后使用this.$message报错

前言:记一个在使用element-ui过程中遇到的一个问题,项目是vue/cli组合elementui框架搭建的,项目采用了按需引入组件的形式,在项目中有个地方需要使用到message提示框,所以使用了这种方法然后报错,上代码

main.js文件夹中
import {Message} from 'element-ui';
Vue.use( Message);

报错截图且会报错undefined /下图就是按需引入message然后使用报错的错误
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
修改使用方法

main.js文件夹中
import {Message} from 'element-ui';
-  Vue.use( Message);  (删除这种方式)
+ Vue.prototype.$message = Message (增加为这种)

再在项目中使用this.$message 就可以正常使用了而且不会有一个空的message

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据引用\[1\]和引用\[2\]的内容,你提到的问题是关于this.$message的。根据引用\[1\]中的代码,这是一段使用Vue框架中的this.$message方法来显示误信息的代码。而根据引用\[2\]中的描述,这个可能是因为在某些情况下,提示信息会被弹框遮住,导致显示不明显。根据这些信息,我可以给出以下回答: this.$message可能是因为在某些情况下,提示信息被弹框遮住,导致显示不明显。为了解决这个问题,可以考虑以下两种解决方案:\[2\] 1. 调整提示信息的显示位置:可以通过修改CSS样式或者调整弹框的层级来确保提示信息在弹框之上显示,从而避免被遮住。 2. 使用其他提示方式:如果提示信息的显示位置无法调整,可以考虑使用其他方式来提示用户,比如在页面的其他位置显示提示信息,或者使用弹出框的方式来显示误信息。 希望以上回答能够解决你的问题。如果还有其他疑问,请随时提问。 #### 引用[.reference_title] - *1* [手动点击关闭 ElementUI Message 或 this.$message 消息提示](https://blog.csdn.net/m0_60553023/article/details/127849949)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [TypeError: this.$message is not a function情况解决](https://blog.csdn.net/weixin_45717984/article/details/124823942)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值