Message 訊息提示

操作後從頂部飄出、短暫停留後自動消失的輕量回饋。使用 Element Plus 的 ElMessage 服務。

設計準則

• 用於「短暫的操作結果回饋」:儲存成功、已加入佇列、發送失敗等;需要使用者確認或閱讀較久的內容請改用 MessageBox 或 Notification
• 型別對應語意色:成功 success、提示 info、警告 warning、錯誤 error
• 文字精簡成一句話:動作 + 結果(「已儲存」「發送失敗,請重試」),不放大段說明
• 頂部置中飄出,約 3 秒自動消失;錯誤等需要看清楚的可設 showClose 讓使用者手動關
• 相同訊息連發用 grouping 合併成一則計數,避免洗版
• 別把 Message 當成功能說明或教學,它是「一閃而過」的

型別

loading

樸素風格(plain)

loading

富文字內容(VNode)

message 可傳一個 VNode,用來強調數字或局部上色。仍以精簡為原則,別塞太多。

loading

彈出位置(placement)

預設頂部置中;可用 placement 改成六個方位之一。全產品統一一個位置,不要每頁不同。

loading

手動關閉與合併

loading

Do / Don't

✅ Do	❌ Don't
短暫操作回饋一句話	放整段說明或教學
型別對應語意色	成功用紅、錯誤用綠
重複訊息用 grouping	連按導致同訊息洗版
關鍵操作用 MessageBox	刪除確認也只丟個 Message

給工程師

• 呼叫:ElMessage({ message, type, plain, showClose, duration, grouping, offset, placement });或簡寫 ElMessage.success('已儲存')
• duration: 0 表示不自動關閉(需搭配 showClose);grouping: true 合併相同訊息
• message 可傳 VNode(用 h())呈現富文字;placement:top(預設)/ top-left / top-right / bottom / bottom-left / bottom-right
• 完整 API 見 Element Plus Message 文件。本站規範優先於 EP 文件中的視覺建議。