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前端組件學習教程》,歡迎大家學習閱讀。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。