ElementUI el-message 提示信息的用法


引入message

Element 注冊了一個$message方法用於調用,Message 可以接收一個字符串或一個 VNode 作為參數,它會被顯示為正文內容。
Element 為 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本頁面中的方式調用 Message

單獨引入:

import { Message } from 'element-ui';

此時調用方法為 Message(options)。我們也為每個 type 定義了各自的方法,如 Message.success(options)。並且可以調用 Message.closeAll() 手動關閉所有實例。

使用舉例

。。。

options參數

參數 說明 類型 可選值 默認值
message 消息文字 string / VNode
type 主題 string success/warning/info/error info
iconClass 自定義圖標的類名,會覆蓋 type string
dangerouslyUseHTMLString 是否將 message 屬性作為 HTML 片段處理 boolean false
customClass 自定義類名 string
duration 顯示時間, 毫秒。設為 0 則不會自動關閉 number 3000
showClose 是否顯示關閉按鈕 boolean false
center 文字是否居中 boolean false
onClose 關閉時的回調函數, 參數為被關閉的 message 實例 function
offset Message 距離窗口頂部的偏移量 number 20

手動關閉

調用 Message 或 this.$message 會返回當前 Message 的實例。如果需要手動關閉實例,可以調用它的 close 方法。


免責聲明!

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



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