2017-11-17 19:14:23
基于jQuery的分页插件相信大家伙已经都用过很多了,今天分享一下基于Vue2.0的分页插件pagination.js
由于项目需求，要求使用 Vue2.0 开发一套有关分页的组件
这款 pagination.js 组件，可以按照各自需求定制，以下代码可以直接复制引入项目中
// 1、Vue写的分页有两个参数
// pages：总页数，pageNo：当前页
// 直接上代码，考虑到兼容 IE 等浏览器，其中 template 直接使用字符串拼接方式
/**
* author: tyd
* createTime: 2017/11/13
* title: 分页组件
*/
var pageComponent = Vue.extend({
template: '<nav aria-label="Page navigation">'+
'<ul class="pagination">'+
'<li :class="{\'disabled\':curPage==1}">'+
'<a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous">'+
'<span aria-hidden="true">上一页</span>'+
'</a>'+
'</li>'+
'<li v-for="page in showPageBtn" :class="{\'active\':page==curPage}">'+
'<a href="javascript:;" v-if="page" @click="goPage(page)">{{page}}</a>'+
'<a href="javascript:;" v-else>···</a>'+
'</li>'+
'<li :class="{\'disabled\':curPage==pages}">'+
'<a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next">'+
'<span aria-hidden="true">下一页</span>'+
'</a>'+
'</li>'+
'<li :class="{\'disabled\':pages==pages}">'+
'<a href="javascript:void(0);">'+
'共 {{pages}} 页'+
'</a>'+
'</li>'+
'</ul>'+
'</nav>',
// 用户组件传递数据
props: {
pages: {
type: Number,
default: 1
},
current: {
type: Number,
default: 1
}
},
data:function (){
return{
curPage:1
}
},
computed: {
// 显示分页按钮
showPageBtn:function() {
let pageNum = this.pages; // 总页数
let index = this.curPage; // 当前页
let arr = [];
if (pageNum <= 6) {
for (let i = 1; i <= pageNum; i++) {
arr.push(i)
}
return arr
}
// 对页码显示进行处理，动态展示
if (index <= 3) return [1, 2, 3, 4, 0, pageNum];
if (index >= pageNum - 1) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
if (index === 4) return [1, 2, 3, 4, 5, 0, pageNum];
if (index === pageNum - 2) return [1, 0, pageNum - 4, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
return [1, 0, index - 2,index - 1, index, index + 1, index + 2, 0, pageNum];
}
},
methods: {
goPage:function(page) {
if (page != this.curPage) {
console.log(page);
this.curPage = page;
this.$emit('navpage', this.curPage);
}else{
console.log('Already in the current page');
}
}
}
});
Vue.component('navigation', pageComponent); // 注册组件
// 2、简单的演示 Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue2.0分页组件</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<!-- 引入外部的 pagination.js 组件即可 -->
<script type="text/javascript" src="pagination.js"></script>
</head>
<body>
<div id="app" class="text-right" style="text-align: center;">
<navigation :pages="pages" :current.sync="pageNo" @navpage="pageList"></navigation>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
pageNo: 1,
pages: 100
},
methods: {
pageList:function(curPage) {
//根据当前页获取数据
this.pageNo = curPage;
console.log("当前页：" + this.pageNo);
}
}
})
</script>
</body>
</html>
演示：
