Drawer 抽屜

從畫面邊緣滑出的面板,承載次要內容而不完全離開主畫面。使用 Element Plus 的 el-drawer。

設計準則

• 用於「次要、可與主畫面對照」的內容:查看詳情、篩選條件、側邊設定;需要高度聚焦的主任務用 Dialog
• 方向以右側(rtl)為主:符合「詳情從右邊滑出」的習慣;上/下方向少用
• 寬度用固定檔位:一般 30% 或 360px;內容多再加寬,但別佔滿整個畫面
• 主操作放底部(#footer):篩選類放「重設 / 套用」,詳情類可不放
• 標題點出內容(「客戶詳情」「篩選客群」);和 Dialog 一樣,有未存內容時要防誤關

基本用法(關閉前確認)

用 before-close 在關閉前跳出確認,避免使用者誤關遺失編輯內容。

loading

方向

loading

承載篩選表單

loading

自訂內容

抽屜內可放頭像、標籤、描述列表等豐富內容,做成完整的詳情面板。

loading

自訂頁首與頁尾

用 #header 自訂頁首(可加圖示)、#footer 放底部操作。

loading

巢狀抽屜

從抽屜內再滑出一層時,內層加 append-to-body。同樣盡量避免多層堆疊。

loading

Do / Don't

✅ Do	❌ Don't
次要內容、可對照主畫面	主要任務也塞抽屜
詳情從右側滑出	方向到處換沒有一致性
寬度用固定檔位	抽屜佔滿整個畫面

給工程師

• v-model 控制開關;常用 props:title、direction(rtl / ltr / ttb / btt)、size、with-header、before-close、append-to-body(巢狀時需要)、destroy-on-close、modal
• 插槽:預設(內容)、#header(可接收 { close })、#footer
• 完整 API 見 Element Plus Drawer 文件。本站規範優先於 EP 文件中的視覺建議。