vue使用this.$message不生效的部分原因及解决方案
更新时间：2023年09月26日 08:45:28 作者：爱意迷了眼丶
这篇文章主要介绍了vue使用this.$message不生效的部分原因及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue使用this.$message不生效的部分原因
目前message使用的过程中，已知的有两点原因，会造成message不生效。
1.是this指向问题
解决办法是：
在关键位置，let _this = this
------ let _this = this ------
2.是message的层级问题
可能有的页面设置的层级太高，遮挡住message
解决办法是：
设置class，给class定义样式的z-index属性
// js
this.$message({
message: '成功展示666我嘞宝贝',
type: 'success',
customClass: 'messageIndex'
})
// css
.messageIndex {
z-index: 99999 !important;
}
TypeError: this.$message is not a function报错情况解决
在最近负责的一个前端项目中，使用this.$message报错了，之前也没注意，然后这次抽空看了一下问题报错原因是因为我用了这种提示写法：
首先，我最开始是用基础写法：
但是这种写法有个弊端，
就是如果你当前页面有弹框的时候，这个提示信息会在遮罩层下面，导致提示信息的明显都不高，甚至可能会被弹框遮住：
然后这里有
两种解决方案
1.适合于你不负责这个项目，用的次数比较少，或者你也不想去配置，就想当前页面用一下：
首先，在你要用的页面去引入
import { Message } from "element-ui";然后在提示信息的地方写：
Message({
type: "warning",
message: "必须选则一个模板且仅能选择一个！"
});或者：
Message.warning("必须选则一个模板且仅能选择一个！");这两种都是可以的
2.适合于你负责的项目，之后肯定会经常用到，首先找到项目的plugin.js文件，这个文件一般在utils文件目录下，这个文件一般都是负责整个项目的全局配置属性
然后同样的先引入Message:
然后导出Message：
export default {
// 全局注册message
Vue.prototype.$message = Message;
}引入后就可以直接写了：
this.$message({
type: "warning",
message: "必须选则一个模板且仅能选择一个！"
});或者直接：
this.$message.warning("必须选则一个模板且仅能选择一个！");最终效果显示：
具体代码逻辑要看每个项目不同的配置写法，我这个是vue项目，提供的是一种方法，具体要往哪里写，各位看官自行研究
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue-element-admin+flask实现数据查询项目的实例代码
这篇文章主要介绍了vue-element-admin+flask实现数据查询项目,填写数据库连接信息和查询语句，即可展示查询到的数据，需要的朋友可以参考下2022-11-11
这篇文章主要给大家介绍了关于如何一步步基于element-ui封装查询组件的相关资料,本文通过示例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
下面小编就为大家分享一篇iview中Select 选择器多选校验方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家介绍了VueJs中customRef函数使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要为大家详细介绍了vue2.x集成百度UEditor富文本编辑器的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
作为使用Vue已经很多年的人，特别是去年一直在使用 Vue3，因此，学到了很多东西。所以本文为大家准备了7个让我们成为更好 Vue 开发者的技巧，需要的可以参考一下2022-06-06
本文主要介绍了Vue显示图片的几种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了vue3的ref是如何实现响应式的,我们讲了ref是如何实现响应式的,主要分为两种情况：ref接收的是number这种原始类型、ref接收的是对象这种非原始类型,需要的朋友可以参考下2024-07-07
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家介绍了Vue中实现表单地区选择与级联联动示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
最新评论