Pagination 翻頁器實現

當數據量過多時，使用分頁分解數據

Pagination 組件主要特色在於：

• 利用 v-model 方便拓展；
• 利用 computed 完成內部邏輯解析。

---

1. 實例

代碼

<fat-pagination :total="1000" :page-size="20" :page-count="11" @change="handleChange" />
複製代碼

實例地址：Pagination 實例

代碼地址：Github UI-Library

2. 原理

基本結構很是簡單，能夠分爲前 forwardPaginations 、中 middlePaginations、後 backwardPaginations，三個部分

<div class="pagination-wrapper">
    <ul :class="['pagination-inner', { 'has-background': background }]">
        <!-- backward Paginations -->
        <li v-for="item in forwardPaginations" :key="item" :class="['pagination-item', { 'is-active': item === current }]" @click.stop="handleClick({ type: 'select', data: item })" >{{ item }}</li>
      <!-- end -->
      <!-- middle paginations -->
      <template v-if="isForwardBrief && isBackwardBrief">
        <li v-for="item in middlePaginations" :key="item" :class="['pagination-item', { 'is-active': item === current }]" @click.stop="handleClick({ type: 'select', data: item })" >{{ item }}</li>
      </template>
      <!-- end -->
      <!-- backward paginations -->
      <li v-for="item in backwardPaginations" :key="item" :class="['pagination-item', { 'is-active': item === current }]" @click.stop="handleClick({ type: 'select', data: item })" >{{ item }}</li>
      <!-- end -->
    </ul>
</div>
複製代碼

前 forwardPaginations ：前向的 Pagination 主要包含兩種狀態，縮略或者是展開，當 current 的值超出所設定的紅框範圍時候，就會呈現縮略狀。

也就是依據 paginalNumber > pageCount && current > pageCount - 3 進行判斷

data() {
    return {
        current: 1
    };
},
computed: {
    // 頁數
    paginalNumber() {
        const { total, pageSize } = this;
        return Math.ceil(total / pageSize);
    },
    // 前向是否縮略
    isForwardBrief() {
        const { paginalNumber, pageCount, current } = this;
        return paginalNumber > pageCount && current > pageCount - 3;
    }
  }
複製代碼

具體的展現的頁碼 forwardPaginations

forwardPaginations() {
    const { pageCount, isForwardBrief, paginalNumber } = this;
    let start = 0;
    let length = paginalNumber <= pageCount
        ? paginalNumber
        : isForwardBrief
        ? 1
        : pageCount;

    return Array.from({ length }, (v, i) => {
        return i + start + 1;
    });
}
複製代碼

一樣的原理，還有後向頁碼 backwardPaginations

isBackwardBrief() {
    const { paginalNumber, pageCount, current } = this;
    return paginalNumber > pageCount && current < paginalNumber - 3;
},
backwardPaginations() {
    const { current, pageCount, isBackwardBrief, paginalNumber } = this;
    let start = paginalNumber - (isBackwardBrief ? 1 : pageCount + 1);
    let length = paginalNumber <= pageCount ? 0 : isBackwardBrief ? 1 : pageCount + 1;

    return Array.from({ length }, (v, i) => {
        return i + start + 1;
    });
}
複製代碼

當上述的 computed 屬性，知足 isBackwardBrief && isForwardBrief 的條件時候，說明當前先後都處於縮略狀態，這是須要生成中間的頁碼

生成的規則就是以 current 爲中心，左右拓展 offset 個頁碼。

middlePaginations() {
    const { current, pageCount, isForwardBrief, isBackwardBrief } = this;
    const offset = Math.round(pageCount / 2);
    let start = current - offset;

    return Array.from({ length: pageCount }, (v, i) => {
        return i + start + 1;
    });
}
複製代碼

處理 v-model

model: {
    prop: "value",
    event: "change"
}
複製代碼

爲何要實現數據的雙向綁定，是由於常常有須要實現圖中需求

這樣能夠，經過修改 v-model 所綁定的值進行二次封裝。

3. 結論

分頁器的具體邏輯通常都是與交互的設計相關，上述方法將其原理拆分的很清晰，按照具體需求修改一些參數就能夠。

往期文章：

• 從零實現Vue的組件庫（零）- 基本結構以及構建工具
• 從零實現Vue的組件庫（一）- Toast 實現
• 從零實現Vue的組件庫（二）- Slider 實現
• 從零實現Vue的組件庫（三）- Tabs 實現
• 從零實現Vue的組件庫（四）- File-Reader 實現
• 從零實現Vue的組件庫（五）- Breadcrumb 實現
• 從零實現Vue的組件庫（六）- Hover-Tip 實現
• 從零實現Vue的組件庫（七）- Message-Box 實現
• 從零實現Vue的組件庫（八）- Input 實現
• 從零實現Vue的組件庫（九）- InputNumber 實現
• 從零實現Vue的組件庫（十）- Select 實現
• 從零實現Vue的組件庫（十一）- Date-picker 實現
• 從零實現Vue的組件庫（十二）- Table 實現
• 從零實現Vue的組件庫（十三）- Pagination 實現
• 從零實現Vue的組件庫（十四）- RadioGroup 實現
• 從零實現Vue的組件庫（十五）- CheckboxGroup 實現

原創聲明： 該文章爲原創文章，轉載請註明出處。