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: '', 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 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>
演示：
