首页 > 代码库 > vue分页组件
vue分页组件
Vue.component(‘page‘, { template:‘<div class="row"><div class="col-lg-3 col-md-3 col-sm-3 form-inline text-center"> <span >每页显示</span> <select name="dataNum" id="dataNum" class="form-control" v-model="dataNum" @change="dtNum"> <option :value="http://www.mamicode.com/arr" v-for="arr in page.dataArr">{{arr}}</option> </select><span > 第{{datafrom}}--{{datato}}条,共{{alldata}}条</span></div> <div class="col-lg-6 col-md-6 col-sm-6"><div id="pageBox" class="clearfix" onselectstart="return false"> <div class="prev" @click="prev">上一页</div> <div class="btbox"><div class="buttonbox"><div class="pagebtn" v-for="(page,index) in pages" @click="nowpg(index)">{{page}}</div></div></div> <div class="next" @click="next">下一页</div> </div></div> <div class="col-lg-3 col-md-3 col-sm-3 form-inline"> <span>共{{pagelength}}页 </span> <input type="text" class="form-control jumppg"> <input type="button" class="form-control" value="http://www.mamicode.com/跳转" @click="jump"> </div></div>‘, mounted:function(){ this.inits() this.change() var _self=this $("#pageBox .next").hover(function(){ if(_self.nowPage!=_self.pagelength){ $(this).addClass("active") } },function(){ if(_self.nowPage!=_self.pagelength){ $(this).removeClass("active") } }) $("#pageBox .prev").hover(function(){ if(_self.nowPage!=1){ $(this).addClass("active") } },function(){ if(_self.nowPage!=1){ $(this).removeClass("active") } }) }, data:function(){ return{ page:{ dataArr:[10,20,30,40], pageNum:[1,2,3], lastPage:1, nowPage:1, dataNum:10 } } }, props:[ "alldata" ], computed:{ datafrom:function(){ if(((this.nowPage-1)*this.page.dataNum+1)<this.alldata){ return (this.nowPage-1)*this.page.dataNum+1 } else{ return this.alldata } }, datato:function(){ if(this.nowPage*this.page.dataNum>this.alldata){ return this.alldata } else{ return this.nowPage*this.page.dataNum } }, pagelength:{ get:function(){ if(this.alldata/this.page.dataNum==0){ return parseInt(this.alldata/this.page.dataNum) } else{ return parseInt(this.alldata/this.page.dataNum)+1 } } }, pages:{ get:function(){ var arr=[] for(var i=1;i<this.pagelength+1;i++){ arr.push(i) } return arr } }, dataNum:{ get:function(){ return this.page.dataNum }, set:function(val){ this.page.dataNum=val } }, nowPage:{ get:function(){ return this.page.nowPage } } }, methods:{ jump:function(){ if(parseInt($(".jumppg").val())<=this.pagelength&parseInt($(".jumppg").val())!=0){ this.page.nowPage=parseInt($(".jumppg").val()) this.$emit("parm",{size:$("#dataNum").val(),pn:this.nowPage}) this.change() this.huadong() this.inits() $(".jumppg").val("") } else{ alert("请输入你要跳转的页面") } }, pagepg:function(){ }, dtNum:function(){ this.$emit("parm",{size:$("#dataNum").val(),pn:this.nowPage}) this.inits() //弹出框 }, nowpg:function(index){ var _self=this this.page.nowPage=index+1 if(this.nowPage!=this.page.lastPage){ this.change() this.$emit("parm",{size:$("#dataNum").val(),pn:this.nowPage}) } //弹出框 this.huadong() this.inits() this.page.lastPage=this.nowPage }, prev:function(){ if(this.nowPage>1){ this.page.nowPage-=1 this.$emit("parm",{size:$("#dataNum").val(),pn:this.nowPage}) this.change() this.huadong() this.inits() } this.page.lastPage=this.nowPage }, next:function(){ if(this.nowPage<this.pagelength){ this.page.nowPage+=1 this.$emit("parm",{size:$("#dataNum").val(),pn:this.nowPage}) this.change() this.huadong() this.inits() } this.page.lastPage=this.nowPage }, change:function(){ if(this.nowPage==1){ $(".buttonbox .pagebtn").eq(this.nowPage-1).addClass("active") $(".buttonbox .pagebtn").eq(this.nowPage-1).siblings(".pagebtn").removeClass("active") $("#pageBox .prev").addClass("fob") $("#pageBox .next").removeClass("fob") $("#pageBox .prev").removeClass("active") } if(this.nowPage<this.pagelength&this.nowPage!=1){ $(".buttonbox .pagebtn").eq(this.nowPage-1).addClass("active") $(".buttonbox .pagebtn").eq(this.nowPage-1).siblings(".pagebtn").removeClass("active") $("#pageBox .prev").removeClass("fob") $("#pageBox .next").removeClass("fob") } if(this.nowPage==this.pagelength){ $(".buttonbox .pagebtn").eq(this.nowPage-1).addClass("active") $(".buttonbox .pagebtn").eq(this.nowPage-1).siblings(".pagebtn").removeClass("active") $("#pageBox .prev").removeClass("fob") $("#pageBox .next").addClass("fob") $("#pageBox .next").removeClass("active") if(this.nowPage==1){ $("#pageBox .prev").addClass("fob") } } }, huadong:function(){ console.log(this.nowPage) console.log(this.page.lastPage) var _self=this if(this.nowPage>this.page.lastPage){ if(this.nowPage<=this.pagelength-4){ $(".buttonbox").css({"marginLeft":-(42*(_self.nowPage-2))+"px"}) }if(this.nowPage>(this.pagelength-4)){ if(this.pagelength>5){ $(".buttonbox").css({"marginLeft":-(42*(_self.pagelength-5))+"px"}) } else{ $(".buttonbox").css({"marginLeft":"0"}) } }} if(this.nowPage<this.page.lastPage){ if(this.nowPage>=5){ $(".buttonbox").css({"marginLeft":parseInt($(‘.buttonbox‘).css("marginLeft"))+42+"px"}) } if(this.nowPage<5){ $(".buttonbox").css({"marginLeft":"0"}) } } }, //初始化page inits:function(){ var _self=this if(this.pagelength<=5){ $("#pageBox").css({"width":42*this.pagelength+144+"px"}) $(".btbox").css({"width":42*this.pagelength+"px"}) $(".buttonbox").css({"width":42*this.pagelength+"px"}) } if(this.pagelength>5){ $("#pageBox").css({"width":"354px"}) $(".btbox").css({"width":"210px"}) $(".buttonbox").css({"width":42*this.pagelength+"px"}) } $(".buttonbox .pagebtn").eq(this.nowPage-1).addClass("active") this.page.lastPage=this.nowPage } } })
刚开始搞vue,很多东西不是很理解,搞这个组件真的学到了很多。
vue分页组件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。