引入组件
<pagerNew :currentPage=“currentPage” :totalPage=“totalPage” @pageChange=“pageChange”>
<template>
<div class="pager" v-if="total_page>1">
<div class="page-item">
<template v-for="(item,index) in pages">
<a href="javascript://;" v-if="item==-1" :key="index" >...</a>
<a href="javascript://;" v-if="item!=-1" :key="index" :class="{'active':item==current_page}" @click="goPage(item)">{{item}}</a>
</template>
</div>
<div class="nextpre-info">
<a href="javascript://;" v-if="current_page>1" @click="prevPage" class="pre" :class="{'disabled':current_page==1}"><i></i></a>
<a href="javascript://;" @click="nextPage" v-if="current_page<total_page" class="next" :class="{'disabled':current_page==total_page}"><i></i></a>
</div>
<div class="clear"></div>
</div>
</template>
js
<script>
// import Toast from '@/utils/toast';
export default {
name:"pagerNew",
props: {
currentPage: {
type: Number,
default: 1
},
totalCount:{
type:Number,
default:0
},
totalPage:{
type:Number,
default:0
},
maxPageNum:{
type:Number,
default:5
}
},
data() {
return {
current_page:this.currentPage?parseInt(this.currentPage):1,//当前页
total_page:this.totalPage, //总页数
pages:[],//存放当前页码
show_max_pagenum:this.maxPageNum, //一次显示分页按钮最大数量
goPageNum:1 //跳转到指定页码
};
},
mounted: function() {
this.getPages();
},
computed: {
},
watch:{
//监听总页数变化
totalPage:function(nval,oval){
if(nval!=oval){
this.total_page=nval;
this.getPages();
}
},
//监听当前页变化
currentPage:function(nval,oval){
if(nval!=oval){
this.current_page=parseInt(nval);
this.getPages();
}
}
},
methods: {
pasteContent:function(e){
if(e.target.value.length==1){
e.target.value=e.target.value.replace(/[^1-9]/g,'')
}else{
e.target.value=e.target.value.replace(/\D/g,'')
}
},
//获取当前显示页码
getPages:function(){
this.pages=[];
// var _pageStart=this.current_page%this.show_max_pagenum==0?((((this.current_page/this.show_max_pagenum)-1)*this.show_max_pagenum)+1): (Math.floor(this.current_page/this.show_max_pagenum) * this.show_max_pagenum)+1;
// var _pages= this.current_page%this.show_max_pagenum==0?this.current_page: Math.ceil(this.current_page/this.show_max_pagenum) * this.show_max_pagenum;
// if(_pages>this.total_page){
// _pages=this.total_page;
// }
// for(var i=_pageStart;i<=_pages;i++){
// this.pages.push(i);
// }
if(this.total_page<=10){
for(var i=1;i<=this.total_page;i++){
this.pages.push(i);
}
}else{
if(this.current_page<5){
for(var i=1;i<=7;i++){
this.pages.push(i);
}
this.pages.push(-1);
for(var j=this.total_page-1;j<=this.total_page;j++){
this.pages.push(j);
}
}else if(this.current_page>=5 && this.current_page<this.total_page-6){
this.pages.push(1);
this.pages.push(-1);
for(var i=this.current_page-2;i<=this.current_page+2;i++){
this.pages.push(i);
}
this.pages.push(-1);
for(var j=this.total_page-1;j<=this.total_page;j++){
this.pages.push(j);
}
}else if(this.current_page>=this.total_page-6){
this.pages.push(1);
this.pages.push(-1);
for(var i=this.total_page-7;i<=this.total_page;i++){
this.pages.push(i);
}
}
}
},
//首页
goFirstPage:function(){
if(this.current_page!=1){
this.current_page=1;
this.getPages();
this.pageChange();
}
},
//上一页
prevPage:function(){
if(this.current_page>1){
this.current_page--;
// if(this.current_page<this.pages[0]){
// this.getPages();
// }
this.getPages();
this.pageChange();
}
},
//下一页
nextPage:function(){
if(this.current_page<this.total_page){
this.current_page++;
// if(this.current_page>this.pages[this.pages.length-1]){
// this.getPages();
// }
this.getPages();
this.pageChange();
}
},
//分页操作
pageChange:function(){
this.$emit("pageChange",parseInt(this.current_page));
},
//点击页码按钮
goPage:function(i){
if(this.current_page!=i){
this.current_page=i;
this.getPages();
this.pageChange();
}
},
//判断输入的页码是否有效
checkInput:function(e){
if(this.goPageNum.indexOf("0")==0 || this.goPageNum.toString().length==1){
this.goPageNum=this.goPageNum.replace(/[^1-9]/g,'');
}else{
this.goPageNum=this.goPageNum.replace(/\D/g,'');
}
if(this.goPageNum>this.total_page){
this.goPageNum=this.total_page;
}
if(this.goPageNum<1){
this.goPageNum=1;
}
},
//跳转到指定页
goDefinePage:function(){
this.current_page=this.goPageNum;
this.getPages();
this.pageChange();
},
//跳转最后一页
goLastPage:function(){
if(this.total_page>0 && this.current_page!=this.total_page){
this.current_page=this.total_page;
var _pageStart=(Math.floor(this.current_page/this.show_max_pagenum) * this.show_max_pagenum)+1;
this.getPages();
this.pageChange();
}
}
},
beforeDestroy:function(){
}
}
</script>
css
<style scoped>
.pager {
max-width: 1200px;
margin: 0 auto;
/* margin-top: 40px; */
}
.pager .page-item {
/* max-width: 400px; */
float: left;
}
.pager .page-item a {
display: inline-block;
line-height: 50px;
background: #FFFFFF;
border-radius: 10px;
text-align: center;
padding: 0px 20px;
font-size: 18px;
color: #424242;
margin-left: 10px;
}
.pager .page-item a:hover {
background-color: #3AA9FD;
color: #FFFFFF;
background-image: linear-gradient(221deg, #6CCBFF 0%, #63B1FE 51%, #3AA9FD 100%);
}
.pager .page-item a.active {
background-color: #3AA9FD;
background-image: linear-gradient(221deg, #6CCBFF 0%, #63B1FE 51%, #3AA9FD 100%);
/* border: 1px solid rgba(151,151,151,0.20); */
color: #FFFFFF;
/* margin: 0px 5px; */
}
.pager .page-item a.disabled {
/* background-color: #f6f6f6;
opacity: 0.6; */
}
.pager .page-total {
float: right;
margin: 0px 15px;
}
.pager .page-total span {
font-family: PingFangSC-Medium;
font-size: 12px;
color: #666666;
letter-spacing: 0.6px;
display: inline-block;
height: 40px;
line-height: 40px;
}
.pager .page-gopage {
float: right;
}
.pager .page-gopage span {
font-family: PingFangSC-Medium;
font-size: 12px;
color: #666666;
letter-spacing: 0.6px;
vertical-align: middle;
margin: 0px 5px;
}
.pager .page-gopage input {
background: #FFFFFF;
border: 1px solid rgba(151, 151, 151, 0.20);
border-radius: 3px;
border-radius: 3px;
width: 40px;
height: 36px;
outline: none;
text-align: center;
box-sizing: border-box;
}
.pager .page-gopage a {
display: inline-block;
width: 65px;
height: 36px;
line-height: 36px;
text-align: center;
background: #FFFFFF;
border: 1px solid rgba(151, 151, 151, 0.20);
border-radius: 3px;
font-family: PingFangSC-Medium;
font-size: 12px;
color: #666666;
box-sizing: border-box;
}
.pager .nextpre-info {
float: right;
}
.pager .nextpre-info a{
display: inline-block;
line-height: 50px;
background: #FFFFFF;
border-radius: 10px;
text-align: center;
padding: 0px 20px;
font-size: 18px;
color: #424242;
letter-spacing: 0;
margin-left: 10px;
}
.pager .nextpre-info a:hover{
background-color: #3AA9FD;
background-image: linear-gradient(221deg, #6CCBFF 0%, #63B1FE 51%, #3AA9FD 100%);
}
.pager .nextpre-info a.next i{
display: inline-block;
width: 8px;
height: 8px;
border-top: 2px solid #424242;
border-right: 2px solid #424242;
border-top-right-radius: 2px;
transform: rotate(45deg);
}
.pager .nextpre-info a.pre i{
display: inline-block;
width: 8px;
height: 8px;
border-top: 2px solid #424242;
border-left: 2px solid #424242;
border-top-right-radius: 2px;
transform: rotate(-45deg);
}
.pager .nextpre-info a.next:hover i{
border-color: #FFFFFF;
}
.pager .nextpre-info a.pre:hover i{
border-color: #FFFFFF;
}
.clear {
clear: both;
}
</style>