2017-11-17 19:14:23
基於jQuery的分頁插件相信大家伙已經都用過很多了,今天分享一下基於Vue2.0的分頁插件pagination.js
由於項目需求，要求使用 Vue2.0 開發一套有關分頁的組件
這款 pagination.js 組件，可以按照各自需求定制，以下代碼可以直接復制引入項目中
// 1、Vue寫的分頁有兩個參數
// pages：總頁數，pageNo：當前頁
// 直接上代碼，考慮到兼容 IE 等瀏覽器，其中 template 直接使用字符串拼接方式
1 /** 2 * author: tyd 3 * createTime: 2017/11/13 4 * title: 分頁組件 5 */ 6 var pageComponent = Vue.extend({ 7 template: '<nav aria-label="Page navigation">'+ 8 '<ul class="pagination">'+ 9 '<li :class="{\'disabled\':curPage==1}">'+ 10 '<a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous">'+ 11 '<span aria-hidden="true">上一頁</span>'+ 12 '</a>'+ 13 '</li>'+ 14 '<li v-for="page in showPageBtn" :class="{\'active\':page==curPage}">'+ 15 '<a href="javascript:;" v-if="page" @click="goPage(page)">{{page}}</a>'+ 16 '<a href="javascript:;" v-else>···</a>'+ 17 '</li>'+ 18 '<li :class="{\'disabled\':curPage==pages}">'+ 19 '<a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next">'+ 20 '<span aria-hidden="true">下一頁</span>'+ 21 '</a>'+ 22 '</li>'+ 23 '<li :class="{\'disabled\':pages==pages}">'+ 24 '<a href="javascript:void(0);">'+ 25 '共 {{pages}} 頁'+ 26 '</a>'+ 27 '</li>'+ 28 '</ul>'+ 29 '</nav>', 30 // 用戶組件傳遞數據 31 props: { 32 pages: { 33 type: Number, 34 default: 1 35 }, 36 current: { 37 type: Number, 38 default: 1 39 } 40 }, 41 data:function (){ 42 return{ 43 curPage:1 44 } 45 }, 46 computed: { 47 // 顯示分頁按鈕 48 showPageBtn:function() { 49 let pageNum = this.pages; // 總頁數 50 let index = this.curPage; // 當前頁 51 let arr = []; 52 if (pageNum <= 6) { 53 for (let i = 1; i <= pageNum; i++) { 54 arr.push(i) 55 } 56 return arr 57 } 58 // 對頁碼顯示進行處理，動態展示 59 if (index <= 3) return [1, 2, 3, 4, 0, pageNum]; 60 if (index >= pageNum - 1) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum]; 61 if (index === 4) return [1, 2, 3, 4, 5, 0, pageNum]; 62 if (index === pageNum - 2) return [1, 0, pageNum - 4, pageNum - 3, pageNum - 2, pageNum - 1, pageNum]; 63 return [1, 0, index - 2,index - 1, index, index + 1, index + 2, 0, pageNum]; 64 } 65 }, 66 methods: { 67 goPage:function(page) { 68 if (page != this.curPage) { 69 console.log(page); 70 this.curPage = page; 71 this.$emit('navpage', this.curPage); 72 }else{ 73 console.log('Already in the current page'); 74 } 75 } 76 } 77 }); 78 Vue.component('navigation', pageComponent); // 注冊組件
// 2、簡單的演示 Html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue2.0分頁組件</title> 6 <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"> 7 <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script> 8 <!-- 引入外部的 pagination.js 組件即可 --> 9 <script type="text/javascript" src="pagination.js"></script> 10 </head> 11 <body> 12 <div id="app" class="text-right" style="text-align: center;"> 13 <navigation :pages="pages" :current.sync="pageNo" @navpage="pageList"></navigation> 14 </div> 15 <script type="text/javascript"> 16 new Vue({ 17 el: "#app", 18 data: { 19 pageNo: 1, 20 pages: 100 21 }, 22 methods: { 23 pageList:function(curPage) { 24 //根據當前頁獲取數據 25 this.pageNo = curPage; 26 console.log("當前頁：" + this.pageNo); 27 } 28 } 29 }) 30 </script> 31 </body> 32 </html>
演示：
