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表示彈出一個錯誤的提示框。方法中可以提供正確或錯誤的消息

代碼修改如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM