自定義封裝組件(分頁器)

• 2022 年 6 月 18 日
• 筆記
• Vue中的一些問題, 自定義封裝分頁器組件

自定義封裝分頁器組件之前需要知道的數據:

1.當前的頁碼
2.總共多少條數據
3.每頁展示多少條數據
4.連續頁碼數(5|7)
5.總頁數

計算連續頁碼數的起始值和結束值

//通過計算屬性來計算出來
computed:{
    startNumAndEndNum(){
      //首先先結構出我們需要的值(當前頁碼值，總頁數，連續頁碼數)，這個值可以讓父組件通過props進行傳遞
      let {pageNo,totalPage,continues} = this
      //給起始值和結束值賦初始變數
      let start = 0,end = 0;
      //判斷當前總頁數是否小於連續頁碼數
      if(totalPage<continues){
        start=1;end=totalPage;
     } else{
        //如果總頁數大於連續頁碼數
        start = pageNo - parseInt(continues/2);
        end = pageNo + parseInt(continues/2);
        //還要判斷起始值是否小於1
        if(start<1){
          start = 1;
          end = continues;
        }
        //判斷結束值是否大於總頁數
        if(end>totalPage){
          end = totalPage;
          start = totalPage - continues +1
        }
     }
      return {start,end}
   }
 }

剩下我們就可以遍歷結束值，讓遍歷出來的值大於等於起始值顯示，否則隱藏，這樣連續頁碼數的值就有了，再根據其他接收到的值進行渲染頁面就可以了

發送請求切換頁面？

通過綁定自定義事件，通過傳入當前的頁碼數發送請求，點擊上一頁，傳入當前的頁碼數-1，點擊下一頁，傳入當前的頁碼數+1，點擊最後一頁直接傳入總頁數