常用于主動操作后的反饋提示。與 Notification 的區別是后者更多用于系統級通知的被動提醒。

基礎用法

從頂部出現，3 秒后自動消失。

Message 在配置上與 Notification 非常類似，所以部分 options 在此不做詳盡解釋，文末有 options 列表，可以結合 Notification 的文檔理解它們。Element 注冊了一個$message方法用于調用，Message 可以接收一個字符串或一個 VNode 作為參數，它會被顯示為正文內容。

1 <template> 2 <el-button :plain="true" @click="open">打開消息提示</el-button> 3 <el-button :plain="true" @click="openVn">VNode</el-button> 4 </template> 5 6 <script> 7 export default { 8 methods: { 9 open() { 10 this.$message('這是一條消息提示'); 11 }, 12 13 openVn() { 14 const h = this.$createElement; 15 this.$message({ 16 message: h('p', null, [ 17 h('span', null, '內容可以是 '), 18 h('i', { style: 'color: teal' }, 'VNode') 19 ]) 20 }); 21 } 22 } 23 } 24 </script> View Code

?

不同狀態

用來顯示「成功、警告、消息、錯誤」類的操作反饋。

當需要自定義更多屬性時，Message 也可以接收一個對象為參數。比如，設置type字段可以定義不同的狀態，默認為info。此時正文內容以message的值傳入。同時，我們也為 Message 的各種 type 注冊了方法，可以在不傳入type字段的情況下像open4那樣直接調用。

1 <template> 2 <el-button :plain="true" @click="open2">成功</el-button> 3 <el-button :plain="true" @click="open3">警告</el-button> 4 <el-button :plain="true" @click="open">消息</el-button> 5 <el-button :plain="true" @click="open4">錯誤</el-button> 6 </template> 7 8 <script> 9 export default { 10 methods: { 11 open() { 12 this.$message('這是一條消息提示'); 13 }, 14 open2() { 15 this.$message({ 16 message: '恭喜你，這是一條成功消息', 17 type: 'success' 18 }); 19 }, 20 21 open3() { 22 this.$message({ 23 message: '警告哦，這是一條警告消息', 24 type: 'warning' 25 }); 26 }, 27 28 open4() { 29 this.$message.error('錯了哦，這是一條錯誤消息'); 30 } 31 } 32 } 33 </script> View Code

?

可關閉

可以添加關閉按鈕。

默認的 Message 是不可以被人工關閉的，如果需要可手動關閉的 Message，可以使用showClose字段。此外，和 Notification 一樣，Message 擁有可控的duration，設置0為不會被自動關閉，默認為 3000 毫秒。

1 <template> 2 <el-button :plain="true" @click="open5">消息</el-button> 3 <el-button :plain="true" @click="open6">成功</el-button> 4 <el-button :plain="true" @click="open7">警告</el-button> 5 <el-button :plain="true" @click="open8">錯誤</el-button> 6 </template> 7 8 <script> 9 export default { 10 methods: { 11 open5() { 12 this.$message({ 13 showClose: true, 14 message: '這是一條消息提示' 15 }); 16 }, 17 18 open6() { 19 this.$message({ 20 showClose: true, 21 message: '恭喜你，這是一條成功消息', 22 type: 'success' 23 }); 24 }, 25 26 open7() { 27 this.$message({ 28 showClose: true, 29 message: '警告哦，這是一條警告消息', 30 type: 'warning' 31 }); 32 }, 33 34 open8() { 35 this.$message({ 36 showClose: true, 37 message: '錯了哦，這是一條錯誤消息', 38 type: 'error' 39 }); 40 } 41 } 42 } 43 </script> View Code

?

文字居中

使用?center?屬性讓文字水平居中。

1 <template> 2 <el-button :plain="true" @click="openCenter">文字居中</el-button> 3 </template> 4 5 <script> 6 export default { 7 methods: { 8 openCenter() { 9 this.$message({ 10 message: '居中的文字', 11 center: true 12 }); 13 } 14 } 15 } 16 </script> View Code

?

使用 HTML 片段

message?屬性支持傳入 HTML 片段

將dangerouslyUseHTMLString屬性設置為 true，message?就會被當作 HTML 片段處理。

1 <template> 2 <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button> 3 </template> 4 5 <script> 6 export default { 7 methods: { 8 openHTML() { 9 this.$message({ 10 dangerouslyUseHTMLString: true, 11 message: '<strong>這是 <i>HTML</i> 片段</strong>' 12 }); 13 } 14 } 15 } 16 </script> View Code

?

message?屬性雖然支持傳入 HTML 片段，但是在網站上動態渲染任意 HTML 是非常危險的，因為容易導致?XSS 攻擊。因此在?dangerouslyUseHTMLString?打開的情況下，請確保?message?的內容是可信的，永遠不要將用戶提交的內容賦值給?message屬性。

?

全局方法

Element 為 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本頁面中的方式調用?Message。

單獨引用

單獨引入?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	—	—

方法

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

方法名說明

close	關閉當前的 Message

轉載于:https://www.cnblogs.com/grt322/p/8564436.html

總結

以上是生活随笔為你收集整理的Message 消息提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。