MessageBox 彈框

打斷流程、要求使用者「確認」或「輸入」後才能繼續的彈框。使用 Element Plus 的 ElMessageBox 服務。

設計準則

• 用於「必須由使用者做決定」的關鍵節點:刪除確認、送出前確認、需要輸入名稱等;純告知的短暫回饋用 Message
• 三種用途對應三種呼叫:純告知用 alert、二選一用 confirm、需要輸入用 prompt
• 危險操作(刪除、清空):type="warning",確認鈕用 danger 樣式與明確動詞(「確定刪除」),不要只寫「確定」
• 訊息寫清楚後果:說明「刪除後會怎樣、能不能復原、影響多少筆」,別讓使用者盲按
• 按鈕文字用動詞:確定鈕描述動作(「確定刪除」「送出」),取消鈕就「取消」
• prompt 要加 inputPattern / inputValidator 做基本驗證

提示(alert)

loading

確認(confirm,危險操作)

loading

輸入(prompt)

loading

富文字內容(VNode)

message 傳 VNode,可局部上色、強調關鍵字。

loading

帶事件處理的 VNode

VNode 內可放帶 onClick 的按鈕,做成「多選一」的處理方式,而不只是確定/取消。

loading

Do / Don't

✅ Do	❌ Don't
關鍵決定才打斷使用者	什麼小事都跳彈框
刪除鈕寫「確定刪除」	危險操作只寫「確定」
訊息說明後果與影響	只寫「確定嗎?」
prompt 加輸入驗證	空白也能送出

給工程師

• ElMessageBox.alert(message, title?, options?) / .confirm(...) / .prompt(...),皆回傳 Promise(then 確認、catch 取消)
• 常用 options:confirmButtonText、cancelButtonText、type、showCancelButton、inputPattern、inputValidator、beforeClose、draggable、distinguishCancelAndClose
• prompt 的 then 會收到 { value }
• 完整 API 見 Element Plus MessageBox 文件。本站規範優先於 EP 文件中的視覺建議。