引入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 方法。