vue分页组件

Posted 2020-09-29

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="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="跳转" @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，很多东西不是很理解，搞这个组件真的学到了很多。