├── README.md
├── WX20170415-143027@2x.png
└── vue-pagination.vue


/README.md:
--------------------------------------------------------------------------------
 1 | # vue-pagination
 2 | 之前一直用layerPage做分页插件的 但是转vue后用layer总感觉怪怪的，所以仿照layer写了个vue组件
 3 | 使用方法：
 4 | ```
 5 | js
 6 | import pagination from '../../components/vue-pagination' //引入分页组件
 7 | export default {
 8 |     components: {
 9 |       pagination,    //注册组件
10 |     },
11 |     data() {
12 |        return {
13 |         pageInfo:{
14 |             total:100,  // 记录总条数   默认空，如果小于pageNum则组件不显示   类型Number
15 |             current:1,  // 当前页数，   默认为1                             类型Number
16 |             pagenum:10, // 每页显示条数,默认10                              类型Number
17 |             pagegroup:5,    // 分页条数     默认为5，需传入奇数                 类型Number
18 |             skin:'#16a086'  // 选中页码的颜色主题 默认为'#16a086'               类型String
19 |         }
20 |        }
21 |     },
22 |      methods:{
23 |         pagechange:function(current){     // 页码改变传入新的页码，此处做回调
24 |            console.log(current);
25 |         }
26 |     }
27 | }
28 | 
29 | html
30 | 
31 | <pagination 
32 |     :pageInfo="pageInfo"
33 |     @change="pagechange"
34 |     ></pagination>
35 | ```
36 | 默认样式如下
37 | ![avatar](https://raw.githubusercontent.com/fengjiel/vue-pagination/master/WX20170415-143027%402x.png)
38 | 


--------------------------------------------------------------------------------
/WX20170415-143027@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fengjiel/vue-pagination/6e527fc3f1acdc551f86f6a6aa808e33cfce301f/WX20170415-143027@2x.png


--------------------------------------------------------------------------------
/vue-pagination.vue:
--------------------------------------------------------------------------------
  1 | <template type="text/template" id="template_pagination">
  2 |     <section class="pages-wrap" v-show="pageInfo.total>pageInfo.pagenum">
  3 |         <ul class="pagination clearfix">
  4 |             <li :class="{'disabled': pageInfo.current == 1}"><a href="javascript:;" @click="clickCurrent(1)"> 首页 </a></li>
  5 |             <li :class="{'disabled': pageInfo.current == 1}"><a href="javascript:;" @click="clickCurrent(pageInfo.current - 1)"> 上一页 </a></li>
  6 |             <li v-for="p in setList" :class="{'active': pageInfo.current == p.val}" >
  7 |                 <a href="javascript:;" v-if="pageInfo.current == p.val" :style="{backgroundColor:pageInfo.skin , borderColor:pageInfo.skin}" @click="clickCurrent(p.val)"> {{ p.text }} </a>
  8 |                 <a href="javascript:;" v-else  @click="clickCurrent(p.val)"> {{ p.text }} </a>
  9 |             </li>
 10 |             <li :class="{'disabled': pageInfo.current == pageInfo.page}"><a href="javascript:;" @click="clickCurrent(pageInfo.current + 1)"> 下一页</a></li>
 11 |             <li :class="{'disabled': pageInfo.current == pageInfo.page}"><a href="javascript:;" @click="clickCurrent(pageInfo.page)"> 尾页 </a></li>
 12 |         </ul>
 13 |     </section>
 14 | </template>
 15 | <script>
 16 | import Vue from 'vue'
 17 | export default {
 18 |     props:['pageInfo'],
 19 |     computed: {
 20 |         page:function() {
 21 |             return Math.ceil(this.pageInfo.total / this.pageInfo.pagenum);
 22 |         },
 23 |         setList:function(){
 24 |             var len = this.page , temp = [], list = [], count = Math.floor(this.pageInfo.pagegroup / 2) ,center = this.pageInfo.current;
 25 |             if( len <= this.pageInfo.pagegroup ){
 26 |                 while(len--){ temp.push({text:this.page-len,val:this.page-len});};
 27 |                 return temp;
 28 |             }
 29 |             while(len--){ temp.push(this.page - len);};
 30 |             var idx = temp.indexOf(center);
 31 |             (idx < count) && ( center = center + count - idx);
 32 |             (this.pageInfo.current > this.page - count) && ( center = this.page - count);
 33 |             temp = temp.splice(center - count -1, this.pageInfo.pagegroup);
 34 |             do {
 35 |                 var t = temp.shift();
 36 |                 list.push({
 37 |                     text: t,
 38 |                     val: t
 39 |                 });
 40 |             }while(temp.length);
 41 |             if( this.page > this.pageInfo.pagegroup ){
 42 |                 (this.pageInfo.current > count + 1) && list.unshift({ text:'...',val: list[0].val - 1 });
 43 |                 (this.pageInfo.current < this.page - count) && list.push({ text:'...',val: list[list.length - 1].val + 1 });
 44 |             }
 45 |             console.log(list)
 46 |             return list;
 47 |         }
 48 |     },
 49 |     created:function (argument) {
 50 |         console.log(this.pageInfo)
 51 | 
 52 |     },
 53 |     methods: {
 54 |         clickCurrent: function(idx) {
 55 |             if( this.pageInfo.current != idx && idx > 0 && idx < this.page + 1) {
 56 |                 this.pageInfo.current = idx;
 57 |                 this.$emit('change',this.pageInfo.current);
 58 |             }
 59 |         }
 60 |     }
 61 | }
 62 | </script>
 63 | <style scoped>
 64 | .pages-wrap {
 65 |     text-align: center;
 66 | }
 67 | .pagination {
 68 |     display: inline-block;
 69 |     padding-left: 0;
 70 |     margin: 20px 0;
 71 |     border-radius: 4px;
 72 | }
 73 | .pagination>li {
 74 |     display: inline;
 75 | }
 76 | .pagination>.active>a, .pagination>.active>a:hover, .pagination>.active>span,  .pagination>.active>span:hover {
 77 |     z-index: 3;
 78 |     color: #fff;
 79 |     cursor: default;
 80 |     background-color: #337ab7;
 81 |     border-color: #337ab7;
 82 | }
 83 | .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:hover {
 84 |     color: #777;
 85 |     cursor: not-allowed;
 86 |     background-color: #fff;
 87 |     border-color: #ddd;
 88 | }
 89 | .pagination>li>a:hover,.pagination>li>span:hover {
 90 |     z-index: 2;
 91 |     color: rgba(0,0,0,0.6);
 92 |     background-color: #eee;
 93 |     border-color: #ddd;
 94 |  }
 95 |  .pagination>li>a, .pagination>li>span {
 96 |     position: relative;
 97 |     float: left;
 98 |     padding: 6px 12px;
 99 |     margin-left: -1px;
100 |     line-height: 1.42857143;
101 |     color: #000;
102 |     text-decoration: none;
103 |     background-color: #fff;
104 |     border: 1px solid #ddd;
105 |  }
106 | </style>
107 | 


--------------------------------------------------------------------------------