Vue.js實現一個自訂分頁組件vue-paginaiton，vue分頁組件

Vue.js實現一個自訂分頁組件vue-paginaiton，vue分頁組件

vue實現一個分頁組件vue-paginaiton

vue使用了一段時間的感觸就是，我再也不想直接操作DOM了。資料繫結式的編程體驗真是好。實現的一個分頁組件。

這裡的css就不放出來了，可以看直接去github上下載：vue-pagination

先上一張執行個體圖吧

模版

<div class="page-bar"> <ul> <li v-if="showFirstText"><a v-on：click="cur--">上一頁</a></li> <li v-for = "index in pagenums"> <a v-on:click="pageChange(index)">{{index}}</a> </li> <li v-if="showNextText"><a v-on：click="cur++">下一頁</a></li> <li><a>共<i>{{all}}</i>頁</a></li> </ul></div>

在未引入js前,頁面的顯示,分析下,all欄位簡單直接輸出即可,{{index}}是分頁碼這個需要一些動態渲染。

var app = new Vue({ el: '#app', data:{ currentpage: 1, totlepage: 28, visiblepage:10, msg: '' },})

調用 new Vue({參數}) 就是建立了一個基本的組件,賦值給變數 app.el就是element的縮寫,定位模版的位置.data就是資料了.知道了總頁數但是要顯示頁碼還是要一番計算,所以顯示頁碼就是計算屬性了.所以我們要用computed

computed: { //計算屬性：返回頁碼數組，這裡會自動進行髒檢查，不用$watch(); pagenums: function(){ //初始化前後頁邊界 var lowPage = 1; var highPage = this.totlepage; var pageArr = []; if(this.totlepage > this.visiblepage){//總頁數超過可見頁數時，進一步處理；  var subVisiblePage = Math.ceil(this.visiblepage/2);  if(this.currentpage > subVisiblePage && this.currentpage < this.totlepage - subVisiblePage +1){//處理正常的分頁  lowPage = this.currentpage - subVisiblePage;  highPage = this.currentpage + subVisiblePage -1;  }else if(this.currentpage <= subVisiblePage){//處理前幾頁的邏輯  lowPage = 1;  highPage = this.visiblepage;  }else{//處理後幾頁的邏輯  lowPage = this.totlepage - this.visiblepage + 1;  highPage = this.totlepage;   } } //確定了上下page邊界後，要準備壓入數組中了 while(lowPage <= highPage){  pageArr.push(lowPage);  lowPage ++; } return pageArr; } },

觀看html模版發現v-if指令.很明顯當內容是true就輸出,否就沒。

重點看下

<li v-for="index in pagenums" v-bind:class="{ active: currentpage == index}"> <a v-on:click="pageChange(index)">{{ index }}</a> </li>

v-for是迴圈渲染輸出計算屬性pagenums.每一次迴圈的子項目賦值給index v-bind:class綁定class,當渲染到目前的角標的時候加個class v-on:click是綁定了事件，我把index當參數傳進入了,後面做判斷，預設傳event事件.
然後我們Vue的選項裡面再增加methods欄位

methods:{ pageChange: function(page){ if (this.currentpage != page) {  this.currentpage = page;  this.$dispatch('page-change', page); //父子組件間的通訊：==>子組件通過$diapatch(),分發事件，父組件冒泡通過v-on:page-change監聽到相應的事件； }; } }

組件互動

組件寫完了，問題來了，使用者點擊發生頁面改變，你怎麼通知其他組件作出相應的變化. 可以在頁角發生改變的函數下，插一條語句通知其他組件。不過這種方法是很差的做法。可以使用

watch: { currentpage: function(oldValue , newValue){  console.log(arguments) }}

觀察了currentpage資料當它改變的時候，可以擷取前後值。然後通知其他組件。

完整的代碼可以看 github:vue-pagination

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。