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