}
},
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分页器组件
