100行代碼實現一個vue分頁組件

今天用vue來實現一個分頁組件，整體來講，vue實現比較簡單，樣式部分模仿了elementUI。全部代碼的源碼能夠再github上下載的到：下載地址 先來看一下實現效果：

點擊查看效果

總體思路

咱們先看一下使用到的文件的目錄：

咱們在 pageComponentsTest.vue頁面引入了 pageComponent.vue分頁組件。總體思路是經過 props來達到組件的靈活通用的效果，總體語法是使用vue的VM語法。

pageComponent.vue實現

首先實現一個分頁，須要知道數據總條數，一個頁面顯示的數據條數和當前顯示第幾頁的數據。那麼咱們在pageComponent.vue裏面的props就有了。看下面的代碼：

props: {
      // 分頁配置
      pageConfig: {
        type: Object, require: true, default() {
          return {
            pageSize: 10,     //一頁的數據條數
            pageNo: 0,        //當前頁的索引
            total: 0,         //總的數據條數
            pageTotal: 0      //總的頁數
          }
        }
      }
複製代碼

根據用戶入參，咱們可使用計算屬性來計算一個總頁數的變量：

computed: {
      //計算總頁數，若是傳了pageTotal,直接取pageTotal的值，若是傳了total，那麼根據pageSize去計算
      pageTotal(){
        const config = this.pageConfig
        if(config.pageTotal){
          return config.pageTotal
        }else {
          if(config.pageSize && config.total){
            return Math.ceil(config.total/config.pageSize)
          }else {
            return 0
          }
        }
      }
    }
複製代碼

有了總頁數，和當前頁，就須要各類判斷來實現咱們的html部分了，這裏分4中狀況

1. 總頁數小於8，只須要直接遍歷到8就好了。
2. 總頁數大於8，但當前頁小於4的。
3. 總頁數大於8，當前頁靠後的。
4. 總頁數大於8，當前頁在中間的。 下面看具體的實現：

<!--上一頁-->
      <button @click="prePage" :disabled="currentPage === 1">上一頁</button>
      <!--總頁數小於8的-->
      <template v-if="pageTotal <= showPageNo">
        <button v-for="i in pageTotal" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
      </template>
      <template v-else-if="currentPage < 4">
        <button v-for="i in 6" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
        <button :disabled="true">···</button>
        <button>{{pageTotal}}</button>
      </template>
      <template v-else-if="currentPage > pageTotal - 4">
        <button>1</button>
        <button :disabled="true">···</button>
        <button v-for="i in 6" @click="changeCurrentPage(i + (pageTotal - 6))" :class="{active:(i + (pageTotal - 6)) === currentPage}" :key="i">{{i + (pageTotal - 6)}}</button>
      </template>
      <template v-else>
        <button>1</button>
        <button :disabled="true">···</button>
        <button @click="changeCurrentPage(currentPage - 2)">{{currentPage - 2}}</button>
        <button @click="changeCurrentPage(currentPage - 1)">{{currentPage - 1}}</button>
        <button class="active">{{currentPage}}</button>
        <button @click="changeCurrentPage(currentPage + 1)">{{currentPage + 1}}</button>
        <button @click="changeCurrentPage(currentPage + 2)">{{currentPage + 2}}</button>
        <button :disabled="true">···</button>
        <button @click="changeCurrentPage(pageTotal)">{{pageTotal}}</button>
      </template>
      <!--下一頁-->
      <button @click="nextPage" :disabled="currentPage === pageTotal">下一頁</button>
複製代碼

能夠看到頁面上須要實現3個方法，分別是上下頁，和點擊頁面的方法。

methods: {
      prePage(){
        this.currentPage -= 1
        this.$emit('changeCurrentPage',this.currentPage)
      },
      nextPage(){
        this.currentPage += 1
        this.$emit('changeCurrentPage',this.currentPage)
      },
      changeCurrentPage(i){
        this.currentPage = i
        this.$emit('changeCurrentPage',this.currentPage)
      }
    }
複製代碼

以上就是pageComponent.vue的大體實現了，每次頁面改變，都會觸發一個changeCurrentPage方法的回調，用來通知當前使用組件的頁面當前頁已經改變。

pageComponentsTest.vue的實現

引用頁面就比較簡單了，只要傳入組件須要的對應的參數，就能顯示咱們的組件了。 引用部分：

<template>
  <div class="pageComponentsTest">
    <page-component :page-config="pageConfigTotal" @changeCurrentPage="changePage"></page-component>
    <page-component :page-config="pageConfigPageTotal"></page-component>
  </div>
</template>

複製代碼

配合入參部分：

{
    name: "pageComponentsTest",
    data() {
      return {
        pageConfigTotal:{total:21,pageSize:10,pageNo:1},
        pageConfigPageTotal:{total:21,pageSize:10,pageNo:1,pageTotal:50}
      }
    },
    components:{'page-component':pageComponent},
    methods: {
      changePage(page){
        this.pageConfigTotal.pageNo = page
      }
    }
  }
複製代碼

總結

能夠看到使用vue實現分頁組件總體來講是很容易了，比使用jQuery方便不少，使用vm模式開發前端的最明顯的一個好處是，能是數據mode部分與view頁面部分保持同步，而開發者不用考慮這個過程，因此總體來講簡單了不少。全部的源碼都能在git上下載。 最後能夠關注個人我的公衆號，實時查看更多更好的文章: