一款基于vue2.0的分页组件---写在页面内

通过 Vue2.0 实现的分页

可*设置分页显示的多少、上一页、下一页、省略号等，也可直接输入跳转到的页码进行跳转，分页的样式可*调整

// 1、页面的 head 部分，需要设计好页面的样式

 .page {
   font-weight: 900;
   height: 40px;
   text-align: center;
   color: #888;
   margin: 20px auto 0;
   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;
 } 

 .pagelist .bgprimary {
   cursor: default;
   color: #fff;
   background: #337ab7;
   border-color: #337ab7;
 } 

 .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 {} 

 .bgprimary {
   cursor: default;
   color: #fff;
   background: #337ab7;
   border-color: #337ab7;
 }

// 2、页面的 body 部分，在多个 div 嵌套中放入多个 span 标签来展示分页

 <div id="app">
   <div>
     <div class="page"  v-show="show">
       <div class="pagelist">
         <span class="jump"v-show="current_page>1" @click="{current_page--}">上一页</span>
         <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
         <span class="ellipsis"  v-show="efont">...</span>
         <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
         <span class="ellipsis"  v-show="efont&&current_page<pages-4">...</span> 

         <span class="jump" @click="{current_page++}">下一页</span>
         <span v-show="current_page<pages-1" class="jump" class="jump" @click="jumpPage(pages)">{{pages}}</span> 

         <span class="jumppoint">跳转到：</span>
         <span class="jumpinp"><input type="text" v-model="changePage"></span>
         <span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
       </div>
     </div>
   </div>
 </div>

// 3、页面底部，通过远程调用 Vue 库，或者引入下载好的 Vue.js，实例化分页并且设置好参数

 <script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 <script>
 var newlist = new Vue({
   el: '#app',
   data: {
     current_page: 1, //当前页
     pages: 50, //总页数
     changePage:'',//跳转页
     nowIndex:0
   },
   computed:{
      show:function(){
          return this.pages && this.pages !=1
      },
      efont: function() {
        if (this.pages <= 7) return false;
        return this.current_page > 5
      },
      indexs: function() { 

        var left = 1,
          right = this.pages,
          ar = [];
        if (this.pages >= 7) {
          if (this.current_page > 5 && this.current_page < this.pages - 4) {
            left = Number(this.current_page) - 3;
            right = Number(this.current_page) + 3;
          } else {
            if (this.current_page <= 5) {
              left = 1;
              right = 7;
            } else {
              right = this.pages; 

              left = this.pages - 6;
            }
          }
        }
        while (left <= right) {
          ar.push(left);
          left++;
        }
        return ar;
      },
    },
   methods: {
     jumpPage: function(id) {
       this.current_page = id;
     },
   },
 })
 </script>

展示效果：