Pagination: add pagerCount prop (#10493)

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>,