Pagination: add pagerCount prop (#10493)

examples/docs/zh-CN/pagination.md

@@ -103,6 +103,18 @@
       :total="400">
     </el-pagination>
   </div>
+  <div class="block">
+    <span class="demonstration">Pager 页码数(默认 7 个)</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage5"
+      :page-size="20"
+      :pager-count="9"
+      layout="sizes, prev, pager, next"
+      :total="1000">
+    </el-pagination>
+  </div>
 </template>
 <script>
   export default {
@@ -119,7 +131,8 @@
         currentPage1: 5,
         currentPage2: 5,
         currentPage3: 5,
-        currentPage4: 4
+        currentPage4: 4,
+        currentPage5: 15
       };
     }
   }
@@ -142,7 +155,8 @@
         currentPage1: 5,
         currentPage2: 5,
         currentPage3: 5,
-        currentPage4: 4
+        currentPage4: 4,
+        currentPage5: 15
       };
     },
     mounted() {
@@ -215,6 +229,7 @@
 | page-size | 每页显示条目个数 | Number | — | 10 |
 | total | 总条目数 | Number | — | — |
 | page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — |
+| pager-count | 显示页码按钮的最大数（不包括prev和next） | Number | 大于等于 5 且小于等于 21 的奇数 | 7 |
 | current-page | 当前页数，支持 .sync 修饰符 | Number | — | 1 |
 | layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | 每页显示个数选择器的选项设置 | Number[] | — |  [10, 20, 30, 40, 50, 100] |

packages/pagination/src/pager.vue

@@ -39,6 +39,8 @@
 
       pageCount: Number,
 
+      pagerCount: Number,
+
       disabled: Boolean
     },
 
@@ -62,12 +64,13 @@
         let newPage = Number(event.target.textContent);
         const pageCount = this.pageCount;
         const currentPage = this.currentPage;
+        const pagerCountOffset = this.pagerCount - 2;
 
         if (target.className.indexOf('more') !== -1) {
           if (target.className.indexOf('quickprev') !== -1) {
-            newPage = currentPage - 5;
+            newPage = currentPage - pagerCountOffset;
           } else if (target.className.indexOf('quicknext') !== -1) {
-            newPage = currentPage + 5;
+            newPage = currentPage + pagerCountOffset;
           }
         }
 
@@ -99,7 +102,8 @@
 
     computed: {
       pagers() {
-        const pagerCount = 7;
+        const pagerCount = this.pagerCount;
+        const halfPagerCount = (pagerCount - 1) / 2;
 
         const currentPage = Number(this.currentPage);
         const pageCount = Number(this.pageCount);
@@ -108,11 +112,11 @@
         let showNextMore = false;
 
         if (pageCount > pagerCount) {
-          if (currentPage > pagerCount - 3) {
+          if (currentPage > pagerCount - halfPagerCount) {
             showPrevMore = true;
           }
 
-          if (currentPage < pageCount - 3) {
+          if (currentPage < pageCount - halfPagerCount) {
             showNextMore = true;
           }
         }

packages/pagination/src/pagination.js

@@ -20,6 +20,14 @@ export default {
 
     pageCount: Number,
 
+    pagerCount: {
+      type: Number,
+      validator(value) {
+        return value > 4 && value < 22 && (value | 0) === value && (value % 2) === 1;
+      },
+      default: 7
+    },
+
     currentPage: {
       type: Number,
       default: 1
@@ -66,7 +74,7 @@ export default {
     const TEMPLATE_MAP = {
       prev: <prev></prev>,
       jumper: <jumper></jumper>,
-      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,
+      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } pagerCount={ this.pagerCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,
       next: <next></next>,
       sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
       slot: <my-slot></my-slot>,

test/unit/specs/pagination.spec.js

@@ -101,6 +101,16 @@ describe('Pagination', () => {
     expect(vm.$el.querySelectorAll('li.number')).to.length(4);
   });
 
+  it('pagerCount', () => {
+    const vm = createTest(Pagination, {
+      pageSize: 25,
+      total: 1000,
+      pagerCount: 21
+    });
+
+    expect(vm.$el.querySelectorAll('li.number')).to.length(21);
+  });
+
   it('will work without total & page-count', (done) => {
     const vm = createTest(Pagination, {
       pageSize: 25,