最近写了一个分页组件，效果如下图：
f-pagination.js文件
Vue.component('f-pagination',{
template:'<div class="fPage" v-if="showPagination">\n' +
' <ul>\n' +
' <li class="sumData">\n' +
' <span>共</span>' +
' <span>{{sumData}}</span>' +
' <span>条</span>\n' +
' </li>\n' +
' <li class="prevPage" :class="{disabled:!prevDisabled}">\n' +
' <a @click="prevText">{{clickText.prevText}}</a>\n' +
' </li>\n' +
' <li class="pageNum" v-for="item in pageSum">\n' +
' <a @click="itemclick(item)" :class="{active:item.active}">{{item.text}}</a>\n' +
' </li>\n' +
' <li class="nextPage" :class="{disabled:!nextDisabled}">\n' +
' <a @click="nextText">{{clickText.nextText}}</a>\n' +
' </li>\n' +
' <li class="showPageNum" v-if="showPageNum">\n' +
' <select v-model="currentperPageNum" @change="changePerPageNum">\n' +
' <option v-for="item in perPageNum" :value="item">' +
' <span>{{item}}<span>' +
' <span>条/页</span>' +
' </option>\n' +
' </select>\n' +
' </li>\n' +
' <li class="selectPageNum" v-if="skipPage">\n' +
' <span>跳至</span>\n' +
' <input type="text" v-model="skipPageNum" @keyup.13="skipPageclick">\n' +
' <span>页</span>\n' +
' </li>\n' +
' </ul>\n' +
' </div>',
props:{
pageNum:{ //总页数
type:Number,
default:0
},
sumData:{ //总数据
type:Number,
default:0
},
clickText:{
type:Object,
default:function(){
return {
prevText:"上一页",
nextText:"下一页"
}
}
},
perPageNum:{ //每页显示多少条
type:Array,
default:function(){
return [100,200,300,400]
}
},
options:{
type:Object,
default:function(){
return {
pageRows:'1',
visibleCount:5,
limitNum:true, //是否显示每页多少条
skipPage:true
}
}
}
},
data:function(){
return{
pageSum:[],//页数数据
currentPage: 1,
prevDisabled: true, //上一页
nextDisabled: false, //下一页
skipPageNum:1,
currentperPageNum:'' //每页显示多少条数据
}
},
computed:{
showPagination:function(){ //总页数大于1时才显示分页
if(this.pageNum == 0 || this.pageNum == 1){
return false;
}else{
return true;
}
},
pageCount:function(){ //显示的页数
if(this.pageNum >= this.options.visibleCount){
return this.options.visibleCount;
}else{
return this.pageNum;
}
},
showPageNum:function(){
return this.options.limitNum;
},
skipPage:function(){
return this.options.skipPage;
}
},
methods:{
initData:function(){ //页面初始化
if(!this.pageCount) return false;
this.pageSum = [];
this.currentPage = 1;
for(var i = 0; i < this.pageCount; i++){
this.pageSum.push({
text: i+1,
active: false
});
}
this.pageSum[0].active = true;
this.prevDisabled = false;
this.nextDisabled = true;
this.skipPageNum = this. pageNum;
},
itemclick:function(item){ //点击页
if(this.currentPage != item.text){
this.currentPage = item.text;
this.calcItem();
}
},
prevText:function(){ //上一页
if(this.prevDisabled){
this.currentPage-=1;
this.calcItem();
}
},
nextText:function(){ //下一页
if(this.nextDisabled){
this.currentPage+=1;
this.calcItem();
}
},
calcItem:function(){
if(this.pageCount < this.options.visibleCount){
this.resetStyle();
this.pageSum[this.currentPage-1].active = true
//计算上一页，下一页的显示
if(this.currentPage == 1){
this.prevDisabled = false;
this.nextDisabled = true;
}else if(this.currentPage == this.pageCount){
this.prevDisabled = true;
this.nextDisabled = false;
}else{
this.prevDisabled = true;
this.nextDisabled = true;
}
} else {
var midNum = Math.ceil((this.pageCount)/2); //中间数
if(this.pageCount % 2 == 0){ //如果是偶数中间数加1
midNum += 1;
}
var midPage = this.pageNum - (this.pageCount - midNum);//最后一页在中间的页码
if(this.currentPage <= midPage){ //当前页在最后一页前
this.resetStyle();
if(this.currentPage <= midNum){ //当前点击的页数小于当前的中间页
this.pageSum[this.currentPage-1].active = true;
var starNum = 0;
for(var i = 0; i < this.pageCount; i++){
this.pageSum[i].text = starNum + i + 1;
}
} else { //当前点击的页数大于当前的中间页
var starNum = this.currentPage - midNum;
for(var i = 0;i < this.pageCount; i++){
this.pageSum[i].text = starNum + i + 1;
}
this.pageSum[midNum-1].active = true;
}
//计算上一页的显示,下一页始终显示
if(this.currentPage == 1){
this.prevDisabled = false;
}else {
this.prevDisabled = true;
}
this.nextDisabled = true;
} else { //如果当前到最后页
var starNum = this.pageNum - this.pageCount +1;
for(var i = 0;i < this.pageCount; i++){
this.pageSum[i].text = starNum + i;
}
this.resetStyle();
var index = this.pageNum - this.currentPage;
this.pageSum[this.pageCount - index - 1].active = true;
//计算下一页的显示,上一页始终显示
if(this.currentPage == this.pageNum){
this.nextDisabled = false;
}else {
this.nextDisabled = true;
}
this.prevDisabled = true;
}
}
},
resetStyle:function(){
for(var i = 0; i < this.pageCount; i++){
this.pageSum[i].active = false;
}
},
skipPageclick:function(){
if(this.skipPageNum>=1 && this.skipPageNum<= this.pageNum){
this.currentPage = parseInt(this.skipPageNum);
}else if(this.skipPageNum>this.pageNum){
this.currentPage = parseInt(this.pageNum);
}else{
this.currentPage = 1;
}
this.calcItem();
this.skipPageNum ='';
},
changePerPageNum:function(){
console.log(this.currentperPageNum);
}
},
created:function(){
this.initData();
}
});
f-pagination.css文件
ul,li,span,input,select{
margin:0;
padding:0;
}
ul{
list-style: none;
}
li{
float:left;
margin-right:10px;
font-size:14px;
}
a{
text-decoration: none;
color:black;
}
.fPage{
margin:100px 200px;
}
.fPage ul>li>a{
border:1px solid #C3C9D3;
text-align:center;
color: #656565;
padding: 6px 12px;
}
.pageNum .active{
background-color: #1B6FEC;
color:white;
}
.fPage .showPageNum>select{
padding: 6px 10px;
margin-top:-6px;
}
.fPage .selectPageNum{
margin-top:-5px;
}
.fPage .selectPageNum>input{
width:20px;
padding: 5px 8px;
}
.disabled{
outline:0 none;
cursor:default;
opacity: 0.4;
/*filer:alpha(opacity=40);*/
pointer-events: none;
}
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="f-pagination.css">
<script src="vue.js"></script>
<script src="f-pagination.js"></script>
</head>
<body>
<div id="app">
<f-pagination
:page-num="pageNum"
:options="tabDataPagination.userOptions"
:sum-data = "tabDataPagination.rowCount"
></f-pagination>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
pageNum:12, //总页数
tabDataPagination: {
count: 0,
rowCount: 300,
userOptions: {
visibleCount: 8,
limitNum:true,
skipPage:true
}
}
}
})
</script>
</html>