Modal
彈窗的開關一律用 v-model 由外層控制。Escape 關閉、焦點鎖在彈窗內、背景不跟著捲,這些都由 useDialog 處理好了,不用自己接。
基本彈窗
CommonModalBasiccomponents/Common/Modal/Basic/Basic.vue
高度依內容決定、寬度有上限。適合確認、簡短表單。
點開看看,可以按 Esc 關閉
Props
* 為必填
Slots
Events
全螢幕彈窗
CommonModalBasicFullcomponents/Common/Modal/Basic/Full.vue
內容超過畫面高度時,彈窗內部自己捲動,背景頁面保持不動。 多一個 #footer 固定在底部放主要行動按鈕。
內容刻意做很長,可以確認捲動行為
Props
* 為必填
Slots
制式內容
CommonModalContentInfocomponents/Common/Modal/Content/Info.vue
「標題 + 訊息 + 一顆按鈕」這種最常見的組合, 放進 CommonModalBasic 的 #body 就好,不用每次自己排版。
常見的完成提示
