Vue分頁組件實例代碼

2019-11-19 16:48:59

字體：大中小

來源：轉載

供稿：網友

當前組件依賴bootstrap樣式，使用前請先引用相關css。

Vue.component('pagination', {  template: `<nav aria-label="Page navigation">    <ul class="pagination">      <li :class="{'disabled': pageNum == 1}"><a href="#" v-on:click.prevent="turnToPage(1)" title="首頁" aria-label="首頁"><i class="fa fa-fast-backward"></i></a></li>      <li :class="{'disabled': pageNum == 1}"><a href="#" v-on:click.prevent="turnToPage(pageNum - 1)" title="上一頁" aria-label="上一頁"><i class="fa fa-backward"></i></a></li>      <li v-if="pageNum > 4"><a href="#" v-on:click.prevent="turnToPage(pageNum - 4)">...</a></li>      <li v-if="pageNum <= 4 && pageNum >1"><a href="#" v-on:click.prevent="turnToPage(1)">1</a></li>      <li v-if="pageNum - 3 > 1"><a href="#" v-on:click.prevent="turnToPage(pageNum - 3)">{{pageNum-3}}</a></li>      <li v-if="pageNum - 2 > 1"><a href="#" v-on:click.prevent="turnToPage(pageNum - 2)">{{pageNum-2}}</a></li>      <li v-if="pageNum - 1 > 1"><a href="#" v-on:click.prevent="turnToPage(pageNum - 1)">{{pageNum-1}}</a></li>      <li class="active"><a href="#" v-on:click.prevent="turnToPage(pageNum)">{{pageNum}}</a></li>      <li v-if="pageNum + 1 < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageNum + 1)">{{pageNum+1}}</a></li>      <li v-if="pageNum + 2 < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageNum + 2)">{{pageNum+2}}</a></li>      <li v-if="pageNum + 3 < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageNum + 3)">{{pageNum+3}}</a></li>      <li v-if="pageNum >= pageTotal - 4 && pageNum < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageTotal)">{{pageTotal}}</a></li>      <li v-if="pageNum < pageTotal - 4"><a href="#" v-on:click.prevent="turnToPage(pageNum + 4)">...</a></li>      <li :class="{'disabled': pageNum == pageTotal}"><a href="#" v-on:click.prevent="turnToPage(pageNum + 1)" title="下一頁" aria-label="下一頁"><i class="fa fa-forward"></i></a></li>      <li :class="{'disabled': pageNum == pageTotal}"><a href="#" v-on:click.prevent="turnToPage(pageTotal)" title="尾頁" aria-label="尾頁"><i class="fa fa-fast-forward"></i></a></li>    </ul>  </nav>`,  props: {    pageNum: Number,    pageSize: Number,    totalItemCount: Number,  },  computed: {    pageTotal: function () {      return Math.ceil(this.totalItemCount / this.pageSize)    }  },  methods: {    turnToPage: function (num) {      if (num > this.pageTotal || num <= 0) {        //toastr.error(`當前頁碼超出了范圍。頁碼：${num}`, '錯誤')        return false      }      this.$emit('change', num)    }  }})

props定義三個屬性：當前頁碼，當前頁顯示數量，總數量

computed定義了一個計算方法：獲取總數量/當前頁顯示數量，向上取整，默認取10個

methods定義了一個根據頁碼跳轉方法：最終用于觸發change事件，$emit用于拋出自定義事件，組件外可以捕獲當前定義的change事件

html組件顯示：

復制代碼代碼如下:

<pagination :page-num="criteria.page.num" :page-size="criteria.page.size" :total-item-count="itemsCount" v-on:change="skiptoPage"></pagination>

以上的值為自己傳入的值

let vm = new Vue({  el: '#app',  data: {    criteria: {      keyword: '',      page: { num: 1, size: 10 }    },    itemsCount: 0  },　　methods: {　　　　　　skiptoPage: function (num) {  　　　　　　　　this.criteria.page.num = num;　　　　}　　}});

以上方法是自定義事件change的方法，你們可以自己去修改內容。

效果圖