1、概述
大家好,我是欧阳方超,可以关注我的公众号“欧阳方超”,后续内容将在公众号首发。
使用element-ui做了简单的登录页面,但是在刷下页面时却出现了info级别的弹窗。分析之后发现是对Message的使用不对引起的。
2、解决过程
说明一下,我使用的element-ui的版本为2.15.13,vue-cli版本为4.5.15,vue版本为2.6.11。
2.1、我的操作
因为要使用弹窗的效果,所以引入了Message组件,在一个js文件中我使用下面的方式引用了Message,并使用它:
import {Message} from 'element-ui'
Vue.use(message)
这样刷新页面时就会出现那个弹窗。
同时由于我准备使用message效果,写了下面的代码:
this.$message({message: res.data.message, type: 'success'});
2.2、观察现象
做了登录页面后,刷新页面出现了如下的弹窗:
观察浏览器“元素”的话,伴随着弹窗会有这样的div元素:
<div role="alert" class="el-message el-message--info" style-"top: 20px; z-index: 2000;"> </div>
浏览器“控制台”有这样的报错:
TypeError: this.$message is not a function
2.3、如何修复
查看官网,是这么使用的,引入完后,需要为Vue.prototype添加全局方法$message,如下:
Vue.prototype.$message = Message;
之后就可以在全局使用Message组件了,因为上面的方式已经把Message注册到全局了,比如:
this.$message({message: res.data.message, type: 'success'});
修改后,刷新页面默认的提示框也没有了,$message()方法也可以正常使用了。
3、总结
以上就是解决使用element-ui时刷新页面总会出现消息提示的问题的解决。
我是欧阳方超,把事情做好了自然就有兴趣了,如果你喜欢我的文章,欢迎点赞、转发、评论加关注。我们下次见。