Message 消息提示

Message 消息提示

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

基礎用法

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

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

<template> <el-button :plain="true" @click="open">打開消息提示</el-button> <el-button :plain="true" @click="openVn">VNode</el-button> </template> <script> export default { methods: { open() { this.$message('這是一條消息提示'); }, openVn() { const h = this.$createElement; this.$message({ message: h('p', null, [ h('span', null, '內容可以是 '), h('i', { style: 'color: teal' }, 'VNode') ]) }); } } } </script>

不同狀態

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

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

<template> <el-button :plain="true" @click="open2">成功</el-button> <el-button :plain="true" @click="open3">警告</el-button> <el-button :plain="true" @click="open">消息</el-button> <el-button :plain="true" @click="open4">錯誤</el-button> </template> <script> export default { methods: { open() { this.$message('這是一條消息提示'); }, open2() { this.$message({ message: '恭喜你，這是一條成功消息', type: 'success' }); }, open3() { this.$message({ message: '警告哦，這是一條警告消息', type: 'warning' }); }, open4() { this.$message.error('錯了哦，這是一條錯誤消息'); } } } </script>

可關閉

可以添加關閉按鈕。

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

<template> <el-button :plain="true" @click="open5">消息</el-button> <el-button :plain="true" @click="open6">成功</el-button> <el-button :plain="true" @click="open7">警告</el-button> <el-button :plain="true" @click="open8">錯誤</el-button> </template> <script> export default { methods: { open5() { this.$message({ showClose: true, message: '這是一條消息提示' }); }, open6() { this.$message({ showClose: true, message: '恭喜你，這是一條成功消息', type: 'success' }); }, open7() { this.$message({ showClose: true, message: '警告哦，這是一條警告消息', type: 'warning' }); }, open8() { this.$message({ showClose: true, message: '錯了哦，這是一條錯誤消息', type: 'error' }); } } } </script>

文字居中

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

<template> <el-button :plain="true" @click="openCenter">文字居中</el-button> </template> <script> export default { methods: { openCenter() { this.$message({ message: '居中的文字', center: true }); } } } </script>

使用 HTML 片段

message 屬性支持傳入 HTML 片段

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

<template> <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button> </template> <script> export default { methods: { openHTML() { this.$message({ dangerouslyUseHTMLString: true, message: '<strong>這是 <i>HTML</i> 片段</strong>' }); } } } </script>

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

本文檔系騰訊雲雲+社區成員共同維護，如有問題請聯系 [e-mail]