設計系統

深色模式

Dialog 對話框 ​

覆蓋在頁面上的模態視窗,用來承載表單、詳情或需要聚焦處理的內容。使用 Element Plus 的 el-dialog。

設計準則 ​

  • 用於「需要聚焦、內容較多」的任務:新增/編輯表單、查看詳情、多步驟設定;只是確認或輸入一個值請用 MessageBox
  • 寬度用固定檔位:小 420、中 480~560、大 720;不要每個彈窗寬度都不一樣
  • 垂直置中用 align-center;內容高度不定時對話框內部自行捲動,不要讓整頁捲
  • 主操作在右下角:主要按鈕(建立/儲存)primary 放最右,取消放其左
  • 防誤關:有未儲存內容時用 before-close 攔截,提醒使用者;close-on-click-modal 視情況關掉
  • 標題一句話點出任務(「新增客群標籤」);不要一次開很多層對話框

基本用法 ​

loading

承載表單(垂直置中) ​

loading

自訂標題列 ​

loading

可拖曳 ​

loading

巢狀對話框 ​

從對話框內再開一層對話框時,內層要加 append-to-body 確保遮罩層級正確。盡量避免多層堆疊,流程能拆頁就拆。

loading

內容居中 ​

center 讓標題與底部按鈕置中,搭配 align-center 垂直置中。適合簡短的確認型對話框。

loading

全畫面 ​

fullscreen 佔滿整個視窗,適合內容很多、需要專注編輯的情境。

loading

自訂動畫 ​

transition 可接受兩種值:動畫名稱(字串) 或 Vue 過渡設定(物件)。字串就用 CSS 依名稱定義 enter/leave(如 Scale、Slide、Bounce);物件形式可再帶過渡事件鉤子(如 onAfterEnter)在動畫節點做事。動畫要輕快(約 0.3 秒內),不要太花俏拖慢操作。

loading

Do / Don't ​

✅ Do❌ Don't
寬度用固定檔位每個彈窗寬度都不同
主操作 primary 放右下主操作放左邊或藏起來
有未存內容時攔截關閉誤點外圍就整份表單消失
一句話標題點出任務開三四層對話框疊在一起

給工程師 ​

  • v-model 控制開關;常用 props:title、width、align-center(垂直置中)、center(標題/按鈕置中)、fullscreen、draggable、transition(動畫名稱)、append-to-body(巢狀時需要)、before-close、destroy-on-close、close-on-click-modal、modal
  • 插槽:預設(內容)、#header(標題列)、#footer(底部按鈕)
  • 表單類建議搭配 destroy-on-close 讓每次開啟都是乾淨狀態
  • 完整 API 見 Element Plus Dialog 文件。本站規範優先於 EP 文件中的視覺建議。