控制項

搜尋、分頁、手風琴、進度條、燈箱。這些元件多半需要外層管理狀態，範例的程式碼都包含對應的事件接法。

搜尋列

CommonControlSearchBar

components/Common/Control/SearchBar.vue

送出時發出 search 事件並帶關鍵字，元件本身不做查詢。

送出後會顯示接到的關鍵字

Props

名稱	型別	預設值	說明
`name`	String	''	表單欄位名稱
`placeholder`	String	'搜尋...'
`disabled`	Boolean	false
`invalid`	Boolean	false	錯誤樣式

Events

事件	Payload	說明
`search`	String	送出搜尋時觸發，帶目前的關鍵字

分頁

CommonTabTab

components/Common/Tab/Tab.vue

切換時發出 change-data 並帶索引，內容要顯示什麼由外層決定。

三個分頁

Props

名稱	型別	預設值	說明
`dataList`*	Array<{ title }>	[]	每個項目一個物件

* 為必填

Events

事件	Payload	說明
`change-data`	Number	切換分頁時觸發，帶被選中的索引

手風琴

CommonControlAccordion

components/Common/Control/Accordion/Accordion.vue

預設可以同時展開多項；要一次只開一項就傳 is-only-one。

可同時展開多項

第一個問題

第二個問題

第三個問題

Props

名稱	型別	預設值	說明
`dataList`*	Array<{ title, content, img?, open? }>	[]
`isOnlyOne`	Boolean	false	一次只能展開一項，展開新的會收合其他

* 為必填

進度條

CommonControlProgress

components/Common/Control/Progress.vue

每個步驟用 completed 決定是否已完成，元件不會自己推算目前在第幾步。

橫向排列

填寫資料

確認訂單

完成付款

Props

名稱	型別	預設值	說明
`progressList`*	Array<{ title, completed }>	[]	completed 決定該步驟是否已完成
`isRow`	Boolean	false	改成橫向排列
`size`	'sm' \| 'md' \| 'lg'	'sm'

* 為必填

CommonControlLightbox

components/Common/Control/Lightbox.vue

開關狀態由外層管理，通常搭配 classes/LightBox.js 這個小 manager。

點按鈕開啟

Props

名稱	型別	預設值	說明
`id`	String	''	同一頁多個 lightbox 時用來區分
`isOpen`	Boolean	false	是否開啟
`imgList`*	Array<String>	[]	圖片路徑陣列
`nowSelected`	Number	0	目前顯示第幾張

* 為必填

Events

事件	Payload	說明
`close-modal`	—	關閉時觸發
`update:selected-img`	Number	切換圖片時觸發