vue.js 分页-蒲公英云

vue.js 分页

先上样式的代码

<style> .fenye { font-weight: 900;height: 40px;text-align: center;color: #888;margin: 0 auto;background: #f2f2f2;}
    .pagelist { font-size: 0;background: #fff;height: 50px;line-height: 50px;}
    .pagelist span { font-size: 14px;}
    .pagelist .jump { border: 1px solid #ccc;padding: 5px 8px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;cursor: pointer;margin-left: 5px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none;}
    .pagelist .bgprimary { cursor: default;color: #fff;background: #fa7804;border-color: #fa7804;}
    .jumpinp input { width: 55px;height: 26px;font-size: 13px;border: 1px solid #ccc-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;text-align: center;}
    .ellipsis { padding: 0px 8px;}
    .jumppoint { margin-left: 30px;}
    .pagelist .gobtn { font-size: 12px;}
    .bgprimary { cursor: default;color: #fff;background: #337ab7;border-color: #337ab7;}
    .pagelist .jump.disabled{ pointer-events: none; background: #ddd;}
</style>

html 部分的代码

<div class="fenye" id="fenye" v-show="show">
    <div class="pagelist">
          <span class="jump" @click="jumpPage(1)">首页</span>
          <span class="jump" :class="{disabled:pstart}" @click="up_current_page">上一页</span>
          <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{ { num}}</span>
          <span :class="{disabled:pend}" class="jump" @click="down_current_page">下一页</span>
          <span class="jump" @click="jumpPage(pages)">尾页</span>
          <!--<span class="jumppoint">跳转到：</span>
          <span class="jumpinp"><input type="text" v-model="changePage"></span>
          <span class="jump gobtn" @click="jumpPage(changePage)">跳转</span>-->
    </div>
</div>

JS部分的代码

<script src="js/vue.js"></script><!--引入vue.js文件，路径已实际情况为准-->
<script>
    var newlist = new Vue({ 
      el: '#fenye',
      data: { 
        //分页插件
        current_page: 0, //当前页
        pages: 0, //总页数
        changePage:'',//跳转页
        nowIndex:0,
        show_page:5,//显示页码的数量
      },
      computed:{ 
        show:function(){ 
            return this.pages && this.pages !=1
        },
        pstart: function() { 
            return this.current_page == 1;
        },
        pend: function() { 
            return this.current_page == this.pages;
        },
        efont: function() { 
            if (this.pages <= this.show_page) return false;
            return this.current_page > 5
        },
        ebehind: function() { 
            if (this.pages <= this.show_page) return false;
            var nowAy = this.indexs;
            return nowAy[nowAy.length - 1] != this.pages;
        },
        indexs: function() { 
            var left = 1,
            right = this.pages,
            ar = [];
            if (this.pages >= this.show_page) { 
                if (this.current_page > 5 && this.current_page < this.pages - 4) { 
                   left = Number(this.current_page) - 2;
                   right = Number(this.current_page) + 2;
                }else { 
                       if (this.current_page <= 5) { 
                         left = 1;
                         right = this.show_page;
                       } else { 
                         right = this.pages;
                         left = this.pages - 4;
                       }
                }
            }
            while (left <= right) { 
                ar.push(left);
                left++;
            }
            return ar;
        },
      },
      methods: { 
        //跳转分页
        jumpPage: function(page) { 
           var that = this;
           that .current_page = page;
           //this.lists(); //执行业务逻辑
        },
        //上一页
        up_current_page:function(){ 
            var that = this;
            that .current_page--;
            //this.lists(); //执行业务逻辑
        },
        //下一页
        down_current_page:function(){ 
            var that = this;
            that .current_page++;
            //this.lists(); //执行业务逻辑
        },
      },
    })
  </script>