vue:配置message全局弹框组件

当用户登录成功或登录失败之后，目前是在console中进行提示，用户是看不到的，为了让用户能明确的知道自己是成功还是失败了，我们应该以一种友好的方式告诉用户，那怎么进行友好的弹框提示呢？可以用Elemetnt-UI中提供的“Message消息提示”

怎么才能使用Message消息提示呢？     

1、 在element.js中导入Message组件

import {Message} from 'element-ui'

2、它的配置方式与Button、Form不一样，它需要进行全局挂载，把Message挂载到vue原型的一个属性上，$message是自定义属性，可以自定义，只要合法就行。

Vue.prototype.$message = Message

注意：Element 为 Vue.prototype 添加了全局方法 $message。故不需要挂载到vue原型上。

代表把弹框组件Message挂载到了VUE的原型对象上。这样的话，每一个组件都可以通过this来访问$message,然后就可以弹框提示了。

$message中提供了一系列弹框方法，设置type字段可以定义不同的状态，默认为info，如success方法表示弹出一个正确的提示框，error表示弹出一个错误的提示框。方法中可以提供正确或错误的消息。

代码修改如下：

 

---

感谢您的阅读，如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮。本文欢迎各位转载，但是转载文章之后必须在文章页面中给出作者和原文连接。