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: 135 ????????},36 ????????current: {37 ????????????type: Number,38 ????????????default: 139 ????????}40 ????},41 ????data:function (){42 ????????return{43 ????????????curPage:144 ????????}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 arr57 ????????????}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: 10021 ????????????????},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>演示：
采用Vue2.0开发的分页js组件
原文地址：http://www.cnblogs.com/sebastian-tyd/p/7853188.html