vue 封装分页组件

分页 一般都是调接口， 接口为这种格式

{code: 0, msg: "success",…}
code:0
data:{

content:[{content: "11", time: "22", },…] //数据列表
nextPage:1  //上一页
number:0　　//第几页
numberOfElements:10
prevPage:1  //下一页
size:10    //页数
totalElements:257
totalPages:26  //总页数
}
msg:"success"

/**
 * 分页
 * @privat
 * 全局用的分页组件
 */
var _pageTemplate='' +
    '<div class="page-bar">' +
    '    <ul>' +
    '        <li v-if="pageNow>1"><a v-on:click="pageClick(pageNow-1)">上一页</a></li>' +
    '        <li v-if="pageNow==1"><a class="banclick">上一页</a></li>' +
    '        <li v-for="index in indexs"  v-bind:class="{ \'active\': pageNow == index}">' +
    '            <a v-on:click="pageClick(index)">{{ index }}</a>' +
    '        </li>' +
    '        <li v-if="pageNow!=pages"><a v-on:click="pageClick(pageNow+1)">下一页</a></li>' +
    '        <li v-if="pageNow == pages"><a class="banclick">下一页</a></li>' +
    '        <li><a>共<i>{{pages}}</i>页</a></li>' +
    '        <li><a><span>跳转到第</span></a></li>' +
    '        <li><a><input type="text" v-model="inputNumber" @input="checkNumber()" style="width: 50px" maxlength="4"></a></li>' +
    '        <li><a><span>页</span></a></li>'+
    '        <li><a><span @click="pageClick(inputNumber)">确定</span></a></li>'+
    '    </ul>' +
    '</div>';
Vue.component('vue-page',{
    template:_pageTemplate,
    props:["page_number","pages","jump"], //接收参数
    data:function(){
        return{
           pageNow:this.page_number,
           inputNumber:"",
           num:this.page_number,
        }
    },
    //监听事件
    // watch: {
    //     cur: function(oldValue , newValue){
    //         console.log(arguments);
    //     }
    // },
    //方法处理
    methods: {
        checkNumber:function () {
            var that =this;
            var reg = /[^0-9.]/g; //正则检验是否数字
                if (reg.test(that.inputNumber)) {
                    that.inputNumber="";
                }
            },
        pageClick:function(e){
            e=Number(e);
            if(e>this.pages){
                e=this.pages;
                this.inputNumber=this.pages;
            }
            if(e != this.page_number||e==this.num){
                this.pageNow =e;
            }
            this.jump(e)
        }
    },
    //计算属性
    computed: {
        indexs: function(){
            var left = 1;
            var right = this.pages;
            var ar = [];
            if(this.pages>= 5){
                if(this.pageNow > 3 && this.pageNow < this.pages-2){
                    left = this.pageNow - 2;
                    right = this.pageNow + 2
                }else{
                    if(this.pageNow<=3){
                        left = 1;
                        right = 5
                    }else{
                        right = this.pages;
                        left = this.pages -4
                    }
                }
            }
            while (left <= right){
                ar.push(left);
                left ++
            }
            return ar
        }

    }

});

这是封装得组件

 data：{
         //分页
            page:1,//第几页
            pages: 10, //总页数
            pagesize: 10,//分页数量       

}     

调用ajax 渲染数据

Journal:function (index) {
    var that =this;
    that.page=index;
    Comm.runebws("url",{
　　　　　　　　　　count:that.pagesize, //预定好跟接口
　　　　　　　　　　page:that.page      //预定好跟接口

},"GET",function (result) {
        if(result.code==0){
            that.Journals=result.data.content;
            that.pages=result.data.totalPages;

        }
    })
}

前端html代码

 <div v-for="item in Journals">
       <div class="middle-list"><div class="middle-list-data">{{item.time}}</div></div>
       <div class="middle-list"><div class="middle-list-name">{{item.ip}}</div></div>
       <div class="middle-list"><div class="middle-list-go">{{item.content}}</div></div>
 </div>

.page-bar{

}
ul,li{
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none
}
.page-bar li:first-child>a {
    margin-left: 0px
}
.page-bar a{
    border: 1px solid #6062A3;
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    cursor: pointer
}
.page-bar a:hover{
    /*background-color: #eee;*/
}
.page-bar a.banclick{
    cursor:not-allowed;
}
.page-bar .active a{
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}
.page-bar i{
    font-style:normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
}