頁面導覽
麵包屑、頁碼、無限捲動載入。三個都不自己管資料,只負責發出事件,由頁面決定怎麼取資料。
麵包屑
CommonNavBreadcrumbcomponents/Common/Nav/Breadcrumb.vue
傳一個由淺到深的陣列。最後一項通常是當前頁, 預設不畫後面的箭頭。
頁碼
CommonControlPaginationcomponents/Common/Control/Pagination.vue
換頁時發出 change-page 並帶新頁碼, 元件不會自己改 currentPage。
可以點點看,目前第 3 頁
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
currentPage* | Number | 1 | |
totalPage* | Number | 1 | |
showChangeListBtn | Boolean | false | 顯示每頁筆數切換 |
* 為必填
Events
| 事件 | Payload | 說明 |
|---|---|---|
change-page | Number | 換頁時觸發,帶新的頁碼 |
載入更多
CommonControlListLoadercomponents/Common/Control/ListLoader.vue
listNum 等於 totalNum 時會自動顯示已到底, 不需要另外判斷。
點一次載入 6 筆,共 30 筆
點擊載入更多( 12 / 30 )
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
listNum | Number | 0 | 目前已載入幾筆 |
totalNum | Number | 0 | 總共幾筆。兩者相等時會顯示已到底 |
isLoading | Boolean | false | |
isBack | Boolean | false | 同時顯示回到頂端 |
Events
| 事件 | Payload | 說明 |
|---|---|---|
get-more | — | 要求載入下一批 |
