├── .editorconfig
├── .gitignore
├── README.md
├── bili.config.js
├── example
    ├── App.vue
    └── index.js
├── package.json
├── src
    ├── Laypage.vue
    └── index.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | [*]
 3 | indent_style = space
 4 | indent_size = 2
 5 | end_of_line = lf
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | [*.md]
10 | trim_trailing_whitespace = false
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.json
3 | example/dist
4 | dist


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## vue-laypage
 2 | 
 3 | > A simple pagination component for Vue.js, Based on [layPage](http://laypage.layui.com/)
 4 | 
 5 | [![NPM version](https://img.shields.io/npm/v/vue-laypage.svg?style=flat)](https://npmjs.com/package/vue-laypage) 
 6 | [![Vue 2.x](https://img.shields.io/badge/Vue-2.x-brightgreen.svg)](https://vuejs.org/v2/guide/)
 7 | [![NPM downloads](https://img.shields.io/npm/dm/vue-laypage.svg?style=flat)](https://npmjs.com/package/vue-laypage) 
 8 | 
 9 | ## Installation and Use
10 | 
11 | ```
12 | $ npm install vue-laypage --save
13 | ```
14 | 
15 | ```
16 | import Laypage from 'vue-laypage'
17 | import 'vue-laypage/vue-laypage.css'
18 | 
19 | export default {
20 |   components: {
21 |     Laypage
22 |   }
23 | }
24 | ```
25 | 
26 | or
27 | 
28 | ```
29 | import Vue from 'vue'
30 | import Laypage from 'vue-laypage'
31 | import 'vue-laypage/vue-laypage.css'
32 | 
33 | Vue.use(Laypage)
34 | ```
35 | ## Props
36 | | Name | Type | Description |
37 | | --- | --- | --- |
38 | | pages | Number | 总页数，必填 |
39 | | groups | Number | 一组显示几页，默认为5 |
40 | | prev | String, Number, Boolean | 上一页按钮的文字，false 不显示 |
41 | | next | String, Number, Boolean | 下一页按钮的文字，false 不显示 |
42 | | first | String, Number, Boolean | 首页按钮的文字，false 不显示 |
43 | | last | String, Number, Boolean | 尾页按钮的文字，false 不显示 |
44 | | skin | String | 按钮高亮的颜色，默认#42b983 |
45 | | skip | Boolean | 是否显示跳转 |
46 | | jump | Function | 触发分页后的回调，返回当前页 |
47 | 
48 | ## LICENSE
49 | 
50 | MIT
51 | 


--------------------------------------------------------------------------------
/bili.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	format: ['umd', 'umd-min', 'cjs', 'es'],
3 | 	banner: true,
4 | 	plugins: ['vue']
5 | };


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <laypage :pages="50" :jump="cb" :groups="5" class="laypage"></laypage>
 4 |     <input type="text" v-model="page">
 5 |     <laypage :pages="50" :jump="cb" :groups="5" skip="skip" class="laypage"></laypage>
 6 |     <laypage :pages="50" :jump="cb" :groups="5" :skin="skin" class="laypage"></laypage>
 7 |     <laypage :pages="50" :jump="cb" :groups="5" :first="first" :last="last" class="laypage"></laypage>
 8 |     <laypage :pages="50" :jump="cb" :groups="5" :prev="prev" :next="next" class="laypage"></laypage>
 9 |     <laypage :pages="50" :jump="cb" :groups="0" class="laypage"></laypage>
10 |     <a href="https://github.com/sinchang/vue-laypage/blob/master/example/App.vue" target="_blank">source code</a>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 |   // import Laypage from '../src/Laypage.vue'
16 |   export default {
17 |     name: 'app',
18 |     data() {
19 |       return {
20 |         page: '1',
21 |         skip: true,
22 |         skin: '#4078c0',
23 |         first: false,
24 |         last: false,
25 |         prev: false,
26 |         next: false
27 |       }
28 |     },
29 |     methods: {
30 |       cb(page) {
31 |         this.page = page
32 |       }
33 |     },
34 |     // components: {
35 |     //   Laypage
36 |     // }
37 |   }
38 | </script>
39 | 
40 | <style>
41 |   .laypage {
42 |     margin: 20px 0;
43 |   }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import Laypage from '../src'
 4 | 
 5 | Vue.use(Laypage)
 6 | 
 7 | new Vue({
 8 |   el: '#app',
 9 |   render: h => h(App)
10 | })
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-laypage",
 3 |   "description": "A simple pagination component for Vue.js",
 4 |   "version": "1.0.4",
 5 |   "main": "dist/vue-laypage.cjs.js",
 6 |   "module": "dist/vue-laypage.es.js",
 7 |   "files": ["dist"],
 8 |   "scripts": {
 9 |     "test": "echo lol",
10 |     "build": "bili",
11 |     "example": "poi example/index.js",
12 |     "build:example": "poi build example/index.js --out-dir example/dist"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/sinchang/vue-laypage.git"
17 |   },
18 |   "bugs": {
19 |     "url": "https://github.com/sinchang/vue-laypage/issues"
20 |   },
21 |   "keywords": ["vue", "pagination", "laypage"],
22 |   "author": "sinchang <sinchangwen@gmail.com>",
23 |   "devDependencies": {
24 |     "bili": "^3.1.1",
25 |     "poi": "^10.1.6",
26 |     "rollup-plugin-vue": "^4.1.0"
27 |   },
28 |   "license": "MIT"
29 | }
30 | 


--------------------------------------------------------------------------------
/src/Laypage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="laypage_main laypageskin_default">
  3 |     <a href="javascript:;" class="laypage_prev" v-if="cur > 1 && prev" @click.prevent="changePage(cur - 1)">{{prev}}</a>
  4 |     <a href="javascript:;" class="laypage_first" @click.prevent="changePage(1)" v-if="first && pagesNumber[0] > 1">{{first}}</a>
  5 |     <a href="javascript:;" v-for="(page, index) in pagesNumber" :key="index" :style="[page === cur ? {color: '#fff', backgroundColor: skin, borderColor: skin} : '']" @click.prevent="changePage(page)">{{ page }}</a>
  6 |     <a href="javascript:;" class="laypage_last" @click.prevent="changePage(pages)" v-if="last && pagesNumber[0] <= pages - groups">{{last}}</a>
  7 |     <a href="javascript:;" class="laypage_next" @click.prevent="changePage(cur + 1)" v-if="cur < pages && next">{{next}}</a>
  8 |     <span class="laypage_total" v-if="skip">
  9 |       <label>到第</label>
 10 |       <input type="number" min="1" onkeyup="this.value=this.value.replace(/\D/, '');" class="laypage_skip" v-model="jumpPage">
 11 |       <label>页</label>
 12 |       <button type="button" class="laypage_btn" @click="jumpFunc">确定</button>
 13 |     </span>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | export default {
 19 |   name: 'laypage',
 20 |   data() {
 21 |     return {
 22 |       cur: 1,
 23 |       jumpPage: ''
 24 |     }
 25 |   },
 26 |   props: {
 27 |     pages: {
 28 |       required: true,
 29 |       type: Number
 30 |     },
 31 |     groups: {
 32 |       type: Number,
 33 |       default: 5
 34 |     },
 35 |     skin: {
 36 |       type: String,
 37 |       default: '#42b983'
 38 |     },
 39 |     first: {
 40 |       type: [String, Number, Boolean],
 41 |       default: '首页'
 42 |     },
 43 |     last: {
 44 |       type: [String, Number, Boolean],
 45 |       default: '尾页'
 46 |     },
 47 |     prev: {
 48 |       type: [String, Boolean],
 49 |       default: '上一页'
 50 |     },
 51 |     next: {
 52 |       type: [String, Boolean],
 53 |       default: '下一页'
 54 |     },
 55 |     skip: {
 56 |       type: Boolean,
 57 |       default: false
 58 |     }
 59 |   },
 60 |   computed: {
 61 |     pagesNumber() {
 62 |       let from
 63 |       let to
 64 |       const diff = (this.groups - 1) / 2
 65 | 
 66 |       if (this.groups > this.pages) {
 67 |         throw new Error('groups can not greater than pages')
 68 |       }
 69 | 
 70 |       if (this.diff % 2 === 0) {
 71 |         from = this.cur - diff
 72 |         to = this.cur + diff
 73 |       } else {
 74 |         from = this.cur - Math.floor(diff)
 75 |         to = this.cur + Math.ceil(diff)
 76 |       }
 77 | 
 78 |       if (from < 1) {
 79 |         from = 1
 80 |         to = this.groups
 81 |       }
 82 | 
 83 |       if (to >= this.pages) {
 84 |         to = this.pages
 85 |         from = to - this.groups + 1
 86 |       }
 87 | 
 88 |       const pagesArr = []
 89 | 
 90 |       while (from <= to) {
 91 |         pagesArr.push(from)
 92 |         from++
 93 |       }
 94 | 
 95 |       return pagesArr
 96 |     }
 97 |   },
 98 |   methods: {
 99 |     changePage(page) {
100 |       if (page > this.pages) return
101 |       this.cur = page
102 |       this.$emit('jump', page)
103 |     },
104 |     jumpFunc() {
105 |       if (!this.jumpPage) return
106 |       this.changePage(parseInt(this.jumpPage, 10))
107 |       this.jumpPage = ''
108 |     }
109 |   }
110 | }
111 | </script>
112 | 
113 | <style scoped>
114 | .laypage_main a,
115 | .laypage_main input,
116 | .laypage_main span {
117 |   height: 26px;
118 |   line-height: 26px;
119 | }
120 | .laypage_main button,
121 | .laypage_main input,
122 | .laypageskin_default a {
123 |   border: 1px solid #ccc;
124 |   background-color: #fff;
125 | }
126 | .laypage_main {
127 |   font-size: 0;
128 |   clear: both;
129 |   color: #666;
130 | }
131 | .laypage_main * {
132 |   display: inline-block;
133 |   vertical-align: top;
134 |   font-size: 12px;
135 | }
136 | .laypage_main a {
137 |   text-decoration: none;
138 |   color: #666;
139 | }
140 | .laypage_main a,
141 | .laypage_main span {
142 |   margin: 0 3px 6px;
143 |   padding: 0 10px;
144 | }
145 | .laypage_main input {
146 |   width: 40px;
147 |   margin: 0 5px;
148 |   padding: 0 5px;
149 | }
150 | .laypage_main button {
151 |   height: 28px;
152 |   line-height: 28px;
153 |   margin-left: 5px;
154 |   padding: 0 10px;
155 |   color: #666;
156 | }
157 | </style>
158 | 
159 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Laypage from './Laypage.vue'
 2 | 
 3 | Laypage.install = Vue => {
 4 |   Vue.component(Laypage.name, Laypage)
 5 | }
 6 | 
 7 | if (typeof window !== 'undefined' && window.Vue) {
 8 |   window.Vue.use(Laypage)
 9 | }
10 | 
11 | export default Laypage
12 | 


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