一款基於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>

 

展示效果：