分页组件封装

封装分页的组件。

template部分：

 

     

       

•          

              第一页

         

•             上一页

         

• {{item}}

         

•             下一页

         

•          

              最后一页

       

         

  共{{di_pageCount}}页

         

  共{{di_totalData}}条记录

         

          跳转

  javascript部分：

  export default {

  name:'divuePagination',

    computed:{

  di_current:function(){

  return this.current

  },  //存放返回当前第几页

    di_count:function(){

  if(this.count>=1){

  return this.count

  }else{

  return this.options.count

        }

  },  //当前页前后页数    (默认：2)

    di_pageCount:function(){

  return this.pageCount?this.pageCount:this.options.pageCount

    },  //存放返回总页数

    di_showPageNum:function(){

  return this.showPageNum==1?true:false

    },  //是否显示页码

    di_showPageCount:function(){

  return this.showPageCount==1?true:false

    },  //是否显示总页数

    di_totalData:function(){

  return this.totalData?this.totalData:this.options.totalData

    },  //存放返回数据总条数

    di_showTotalData:function(){

  return this.showTotalData==1?true:false

    },  //是否显示数据总条数

    di_nextPage:function(){

  return this.nextPage?this.nextPage:this.options.nextPage

    },  //是否有下一页

    di_coping:function(){

  return this.coping==1?true:false

    },  //是否开启首页尾页

    di_showSkipPage:function(){

  return this.showSkipPage==1?true:false

    },  //是否显示跳页功能

    di_pageNum:function(){//页码生成

        var arr=[];//页码数组

        var show_num_size=Number(this.di_count)*2+1;//依据当前页前后页数 计算总页码个数

        if(this.di_pageCount<=show_num_size){

  for(var i=1;i<=this.di_pageCount;i++){

  arr.push(i);

          }

  }else{

  if(this.di_current<=this.di_count){

  for(var i=1;i<=show_num_size;i++){

  arr.push(i);

              }

  }else if(this.di_current>this.di_pageCount-this.di_count){

  for(var i=this.di_pageCount-show_num_size+1;i<=this.di_pageCount;i++){

  arr.push(i);

              }

  }else{

  for(var i=this.di_current-this.di_count;i<=Number(this.di_current)+Number(this.di_count);i++){

  arr.push(i);

              }

  }

  }

  return arr;

    }

  },

    data:function(){

  return {

  skipvalue:"", //跳页功能：输入框值

        options:{//默认值配置

          count:2,                //当前页前后页数    (默认：2)

          pageCount:1,            //存放返回总页数

          totalData:1,            //存放返回数据总条数

          nextPage:false        //是否有下一页

        }

  }

  },

    props:["current","count","pageCount","showPageNum","showPageCount","totalData","showTotalData","nextPage","coping","showSkipPage"],

    methods:{

  clickFirst:function(){//点击第一页

        if(this.di_current-1<1){

  return false;

        }

  this.$emit("runAjax",1);

    },

    clickCurrent:function(item){//点击某一页

        this.$emit("runAjax",item);

    },

    clickLast:function(){//点击最后一页

        if(Number(this.di_current)+1>this.di_pageCount){

  return false;

        }

  this.$emit("runAjax",this.di_pageCount);

    },

    clickPrev:function(){//点击上一页

        if(this.di_current-1<1){

  return false;

        }

  this.$emit("runAjax",this.di_current-1);

    },

    clickNext:function(){//点击下一页

        if(Number(this.di_current)+1>this.di_pageCount){

  return false;

        }

  this.$emit("runAjax",Number(this.di_current)+1);

    },

    clickSkip:function(){//点击下一页

        if(isNaN(this.skipvalue)){

  console.log("必须是数字")

  return false;

        }

  if(this.skipvalue<1 ||this.skipvalue>this.di_pageCount){

  console.log("超过范围")

  return false;

        }

  this.$emit("runAjax",this.skipvalue);

    }

  },

    created:function(){

  }

  }

  style样式

  .divuepagination{

  text-align:center;

    font-size:14px;

  }

  .divuepage{

  display:inline-block;

      padding-left:0;

      margin:20px 0;

      border-radius:4px;

    vertical-align:top;

  }

  .divuepage .divuepage-text{

  float:left;

    padding:6px 12px;

    line-height:1.42857143;

    color:#337ab7;

    margin:0 2px;

    border-radius:4px;

    border:none;

  }

  .divuepage .divuepage-btn{

  float:left;

    padding:6px 12px;

    line-height:1.42857143;

    color:#337ab7;

    margin:0 2px;

    border-radius:4px;

    border:none;

    border:1px solid #dddddd;

    cursor:pointer;

  }

  .divuepage .divuepage-input{

  width:40px;

    float:left;

    padding:6px 12px;

    line-height:1.42857143;

    color:#337ab7;

    margin:0 2px;

    border-radius:4px;

    border:none;

    border:1px solid #dddddd;

  }

  .pagination {

  display:inline-block;

    padding-left:0;

    margin:20px 0;

    border-radius:4px;

  }

  .pagination >li {

  display:inline;

  }

  .pagination >li >a,

  .pagination >li >span {

  position:relative;

    float:left;

    padding:6px 12px;

    line-height:1.42857143;

    text-decoration:none;

    color:#337ab7;

    background-color:#ffffff;

    border:1px solid #dddddd;

    margin-left: -1px;

    cursor:pointer;

  }

  .pagination >li:first-child >a,

  .pagination >li:first-child >span {

  margin-left:0;

    border-bottom-left-radius:4px;

    border-top-left-radius:4px;

  }

  .pagination >li:last-child >a,

  .pagination >li:last-child >span {

  border-bottom-right-radius:4px;

    border-top-right-radius:4px;

  }

  .pagination >li >a:hover,

  .pagination >li >span:hover,

  .pagination >li >a:focus,

  .pagination >li >span:focus {

  z-index:2;

    color:#23527c;

    background-color:#eeeeee;

    border-color:#dddddd;

  }

  .pagination > .active >a,

  .pagination > .active >span,

  .pagination > .active >a:hover,

  .pagination > .active >span:hover,

  .pagination > .active >a:focus,

  .pagination > .active >span:focus {

  z-index:3;

    color:#ffffff;

    background-color:#337ab7;

    border-color:#337ab7;

    cursor:default;

  }

  .pagination > .disabled >span,

  .pagination > .disabled >span:hover,

  .pagination > .disabled >span:focus,

  .pagination > .disabled >a,

  .pagination > .disabled >a:hover,

  .pagination > .disabled >a:focus {

  color:#777777;

    background-color:#ffffff;

    border-color:#dddddd;

    cursor:not-allowed;

  }

  在router.js中

  import divuePaginationfrom '@/module/divuePagination'

  Vue.component('divue-pagination', divuePagination)

  使用例子

     

         

  //模拟ajax数据 共7页 32条
  演示内容：页码数量设置显示5个

         

             

  • id:{{item.id}} 内容：{{item.text}}

                    :current="current"

                    :count="count"

                    :pageCount="pageCount"

                    :showPageNum="showPageNum"

                    :showPageCount="showPageCount"

                    :totalData="totalData"

                    :showTotalData="showTotalData"

                    :nextPage="nextPage"

                    :coping="coping"

                    :showSkipPage="showSkipPage"

                    @runAjax="runAjax">

        export default {

    name:"homePage",

            data () {

    return {

    pagename:"首页",

                    list: [],                //存放返回当前页的数据

                    current:1,              //存放返回当前第几页

                    count:2,                          //当前页前后页数    (默认：2)

                    pageCount:"",            //存放返回总页数

                    showPageNum:1,            //是否显示页码    （默认值：1-显示 其他-不显示）

                    showPageCount:1,              //是否显示总页数 （默认值：1-显示 其他-不显示）

                    totalData:"",            //存放返回数据总条数

                    showTotalData:1,              //是否显示数据总条数（默认值：1-显示 其他-不显示）

                    nextPage:false,                  //是否有下一页

                    coping:1,                      //是否开启首页尾页（默认值：1-显示 其他-不显示）

                    showSkipPage:1,              //是否显示跳页功能（默认值：1-显示 其他-不显示）

                }

    },

            methods:{

    runAjax:function(current){

    var that=this;

                    var list=[];

                    var pageCount="";

                    var nextPage="";

                    var totalData="";

                    //模拟ajax数据 1-7页

                    setTimeout(function(){

    if(current==1){

    list=[

    {id:1,text:"我是显示内容111111"},

                                {id:2,text:"我是显示内容222222"},

                                {id:3,text:"我是显示内容3333333333"},

                                {id:4,text:"我是显示内容44444444444"},

                                {id:5,text:"我是显示内容555555555"},

                            ]

    pageCount=7;

                            nextPage=true;

                            totalData=32;

                        }else if(current==2){

    list=[

    {id:1,text:"我是显示内容66666666"},

                                {id:2,text:"我是显示内容7777777777"},

                                {id:3,text:"我是显示内容8888888888"},

                                {id:4,text:"我是显示内容99999999999"},

                                {id:5,text:"我是显示内容101010"},

                            ]

    pageCount=7;

                            nextPage=true;

                            totalData=32;

                        }else if(current==3){

    list=[

    {id:1,text:"我是显示内容111111111111111"},

                                {id:2,text:"我是显示内容121212"},

                                {id:3,text:"我是显示内容131313"},

                                {id:4,text:"我是显示内容141414"},

                                {id:5,text:"我是显示内容15515"},

                            ]

    pageCount=7;

                            nextPage=true;

                            totalData=32;

                        }else if(current==4){

    list=[

    {id:1,text:"我是显示内容161616"},

                                {id:2,text:"我是显示内容171717"},

                                {id:3,text:"我是显示内容181818"},

                                {id:4,text:"我是显示内容191919"},

                                {id:5,text:"我是显示内容202020"},

                            ]

    pageCount=7;

                            nextPage=true;

                            totalData=32;

                        }else if(current==5){

    list=[

    {id:1,text:"我是显示内容2121"},

                                {id:2,text:"我是显示内容22222"},

                                {id:3,text:"我是显示内容232323"},

                                {id:4,text:"我是显示内容242424"},

                                {id:5,text:"我是显示内容252525"},

                            ]

    pageCount=7;

                            nextPage=true;

                            totalData=32;

                        }else if(current==6){

    list=[

    {id:1,text:"我是显示内容2626"},

                                {id:2,text:"我是显示内容2727"},

                                {id:3,text:"我是显示内容2828"},

                                {id:4,text:"我是显示内容2929"},

                                {id:5,text:"我是显示内容3030"},

                            ]

    pageCount=7;

                            nextPage=true;

                            totalData=32;

                        }else if(current==7){

    list=[

    {id:1,text:"我是显示内容3131"},

                                {id:2,text:"我是显示内容3232"}

    ]

    pageCount=7;

                            nextPage=false;

                            totalData=32;

                        };

                        that.list=list;

                        that.current=current;

                        that.pageCount=pageCount;

                        that.nextPage=nextPage;

                        that.totalData=totalData;

                    },200);

                },

            },

            created:function(){

    //模拟返回第一页数据

                this.runAjax(1);

                // //模拟返回第一页数据

    // this.runAjax2(1);

    // //模拟返回第一页数据

    // this.runAjax3(1);

    // //模拟返回第一页数据

    // this.runAjax4(1);

    // //模拟返回第一页数据

    // this.runAjax5(1);

            },

            mounted:function(){

    }

    }