使用vue编写的分页器组件，支持输入页码跳转，效果如图：
1、点击前五页：
2、点击中间部分页面
3、点击第一页，上一页按钮失效，点击最后一页，下一页按钮失效
组件调用：
//html调用 参数:pageSize(总页数);pageNo(当前页)
<pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager>
//组件引入
import pager from '../../component/pager/pager.vue'
//组件调用声明
components:{ pager}
//参数
data(){
return {
pageSize: 30,
pageNo: 2
}
}
//接收跳转事件
methods:{
jump(id){
console.log(id)
},
}
组件编写
pager.vue：
<template>
<div class="pager-wrapper" ref="pager">
<div class="pager-box">
<a class="pager-prev" :class="{'pager-disabled':prevDisable}" href="javascript:;" @click="jumpPrev()">上一页</a>
<template v-for="i in pageSize">
<span v-if="i==pageNo" class="pager-curr">
<em class="pager-em"></em><em>{{i}}</em>
</span>
<a v-else-if="pageNo<5&&(i)<6" href="javascript:;" @click="jump(i)">
{{i}}
</a>
<a v-else-if="pageSize<7||i==1||i==pageSize||(pageNo-2<=i&&i<=pageNo+2)" href="javascript:;" @click="jump(i)">
{{i}}
</a>
<template v-else>
<span v-if="pageNo<5&&i==6" class="pager-spr">…</span>
<span v-if="pageNo==4&&i==7" class="pager-spr">…</span>
<span v-if="pageNo>4&&i==pageNo-3" class="pager-spr">…</span>
<span v-if="pageNo>4&&i==pageNo+3" class="pager-spr">…</span>
</template>
</template>
<a class="pager-next" :class="{'pager-disabled':nextDisable}" href="javascript:;" @click="jumpNext()">下一页</a>
</div>
<div class="pager-input">
<input type="text" v-model="jumpPage">
<a class="pager-btn-go" href="javascript:;" @click="Go()">GO</a>
</div>
</div>
</template>
<script>
export default {
model:{ //通过v-model传过来的参数
prop: 'pageNo',
event: 'jumpPage'
},
props:{
pageSize:{
type: Number,
default: 1
},
pageNo:{ //通过v-model传过来的参数
type: Number,
default: 1
}
},
data(){
return {
jumpPage:'' //避免操作props参数
}
},
computed: {
prevDisable: function(){ //“上一页”按钮是否可点
if(this.pageNo > 1){
return false;
}else{
return true
}
},
nextDisable: function(){ //“下一页”按钮是否可点
if(this.pageNo < this.pageSize && this.pageSize > 1){
return false;
}else{
return true;
}
},
},
methods: {
jumpPrev: function(){ //点击上一页
if(this.pageNo == 1){
return ;
}else{
this.$emit('jumpPage',this.pageNo-1);
this.$emit('on-jump',this.pageNo-1);
}
},
jumpNext: function(){ //点击下一页
if(this.pageNo == this.pageSize){
return ;
}else{
this.$emit('jumpPage',this.pageNo+1); //修改当前页码
this.$emit('on-jump',this.pageNo+1); //跳转
}
},
jump: function(id){ //直接跳转
if(id>this.pageSize){
id=this.pageSize;
}
this.jumpPage = '';
this.$emit('jumpPage',id); //修改当前页码
this.$emit('on-jump',id); //跳转
},
Go: function(){
if(this.jumpPage==''){ //判空处理
return ;
}else if(/^\d*$/.test(parseInt(this.jumpPage))){ //填写数字才能跳转
this.jump(parseInt(this.jumpPage));
this.jumpPage = '';
}else{
this.jumpPage = '';
return ;
}
}
}
}
</script>
完整代码可下载：vue分页器组件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。