DIV CSS 佈局教程網

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

本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。

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