Alert 提示

常駐在頁面中的區塊式提示,用來說明某個區域的狀態或注意事項。使用 Element Plus 的 el-alert。

設計準則

• 用於「頁面級、需要停留閱讀」的提示:例如頁面頂部的注意事項、表單上方的說明;短暫的操作回饋(儲存成功)請用 Message
• 型別對應語意色:一般 primary、成功 success、提示 info、警告 warning、錯誤 error;全產品一致
• 加 show-icon 讓型別更好辨識;內容較長時用 description 補一段說明
• 主題選一種為主:預設 light;dark 只給需要強烈強調的少數場景
• 可關閉的提示(closable)適合「看過就好」的訊息;必須持續存在的警告設 :closable="false"
• 一個畫面不要塞太多 alert,重點才會突出

型別(語意色)

loading

主題

loading

文字置中

用 center 讓文字水平置中。適合沒有描述、只有一句標題的提示;有 description 時不建議置中。

loading

帶描述文字

loading

關閉行為

loading

Do / Don't

✅ Do	❌ Don't
頁面級、需停留的提示用 Alert	短暫回饋也用常駐 Alert
型別對應語意色	錯誤用綠色、成功用紅色
重要警告設不可關閉	關鍵警告可被一鍵關掉忘記
一畫面重點 1–2 條	一次疊五六條 alert

給工程師

• 常用 props:title、type(primary / success / info / warning / error)、description、show-icon、closable、close-text、center、effect(light / dark)
• 事件:@close;預設插槽可放自訂內容,#title 可自訂標題
• 完整 API 見 Element Plus Alert 文件。本站規範優先於 EP 文件中的視覺建議。