Pagination: add disabled prop (#10006)

examples/docs/en-US/pagination.md

@@ -221,6 +221,7 @@ Add more modules based on your scenario.
 | popper-class | custom class name for the page size Select's dropdown | string | — | — |
 | prev-text | text for the prev button | string | — | — |
 | next-text | text for the next button | string | — | — |
+| disabled | whether Pagination is disabled | boolean | — | false |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/es/pagination.md

@@ -207,6 +207,7 @@ Agrega más modulos basados en su escenario.
 | popper-class | clase propia para el `dropdown` del `select` del número de páginas | string   | —                                        | —                                      |
 | prev-text    | texto para el botón `prev`               | string   | —                                        | —                                      |
 | next-text    | texto para el botón `next`               | string   | —                                        | —                                      |
+| disabled | whether Pagination is disabled | boolean | — | false |
 
 ### Eventos
 | Nombre del evento | Descripción                             | Parámetros                    |

examples/docs/zh-CN/pagination.md

@@ -221,6 +221,7 @@
 | popper-class | 每页显示个数选择器的下拉框类名 | string | — | — |
 | prev-text | 替代图标显示的上一页文字 | string | — | — |
 | next-text | 替代图标显示的下一页文字 | string | — | — |
+| disabled | 是否禁用 | boolean | — | false |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |

packages/pagination/src/pager.vue

 <template>
   <ul @click="onPagerClick" class="el-pager">
     <li
-      :class="{ active: currentPage === 1 }"
+      :class="{ active: currentPage === 1, disabled }"
       v-if="pageCount > 0"
       class="number">1</li>
     <li
       class="el-icon more btn-quickprev"
-      :class="[quickprevIconClass]"
+      :class="[quickprevIconClass, { disabled }]"
       v-if="showPrevMore"
-      @mouseenter="quickprevIconClass = 'el-icon-d-arrow-left'"
+      @mouseenter="onMouseenter('left')"
       @mouseleave="quickprevIconClass = 'el-icon-more'">
     </li>
     <li
       v-for="pager in pagers"
       :key="pager"
-      :class="{ active: currentPage === pager }"
+      :class="{ active: currentPage === pager, disabled }"
       class="number">{{ pager }}</li>
     <li
       class="el-icon more btn-quicknext"
-      :class="[quicknextIconClass]"
+      :class="[quicknextIconClass, { disabled }]"
       v-if="showNextMore"
-      @mouseenter="quicknextIconClass = 'el-icon-d-arrow-right'"
+      @mouseenter="onMouseenter('right')"
       @mouseleave="quicknextIconClass = 'el-icon-more'">
     </li>
     <li
-      :class="{ active: currentPage === pageCount }"
+      :class="{ active: currentPage === pageCount, disabled }"
       class="number"
       v-if="pageCount > 1">{{ pageCount }}</li>
   </ul>
@@ -37,7 +37,9 @@
     props: {
       currentPage: Number,
 
-      pageCount: Number
+      pageCount: Number,
+
+      disabled: Boolean
     },
 
     watch: {
@@ -53,7 +55,7 @@
     methods: {
       onPagerClick(event) {
         const target = event.target;
-        if (target.tagName === 'UL') {
+        if (target.tagName === 'UL' || this.disabled) {
           return;
         }
 
@@ -83,6 +85,15 @@
         if (newPage !== currentPage) {
           this.$emit('change', newPage);
         }
+      },
+
+      onMouseenter(direction) {
+        if (this.disabled) return;
+        if (direction === 'left') {
+          this.quickprevIconClass = 'el-icon-d-arrow-left';
+        } else {
+          this.quicknextIconClass = 'el-icon-d-arrow-right';
+        }
       }
     },
 

packages/pagination/src/pagination.js

@@ -42,7 +42,9 @@ export default {
 
     nextText: String,
 
-    background: Boolean
+    background: Boolean,
+
+    disabled: Boolean
   },
 
   data() {
@@ -62,7 +64,7 @@ export default {
     const TEMPLATE_MAP = {
       prev: <prev></prev>,
       jumper: <jumper></jumper>,
-      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } on-change={ this.handleCurrentChange }></pager>,
+      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,
       next: <next></next>,
       sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
       slot: <my-slot></my-slot>,
@@ -107,7 +109,7 @@ export default {
         return (
           <button
             type="button"
-            class={['btn-prev', { disabled: this.$parent.internalCurrentPage <= 1 }]}
+            class={['btn-prev', { disabled: this.$parent.disabled || this.$parent.internalCurrentPage <= 1 }]}
             on-click={ this.$parent.prev }>
             {
               this.$parent.prevText
@@ -126,7 +128,7 @@ export default {
             type="button"
             class={[
               'btn-next',
-              { disabled: this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
+              { disabled: this.$parent.disabled || this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
             ]}
             on-click={ this.$parent.next }>
             {
@@ -166,7 +168,8 @@ export default {
             <el-select
               value={ this.$parent.internalPageSize }
               popperClass={ this.$parent.popperClass || '' }
-              on-input={ this.handleChange }>
+              on-input={ this.handleChange }
+              disabled={ this.$parent.disabled }>
               {
                 this.pageSizes.map(item =>
                   <el-option
@@ -253,6 +256,7 @@ export default {
               domPropsValue={ this.$parent.internalCurrentPage }
               type="number"
               ref="input"
+              disabled={ this.$parent.disabled }
               nativeOnKeyup={ this.handleKeyup }
               onChange={ this.handleChange }
               onFocus={ this.handleFocus }
@@ -284,11 +288,13 @@ export default {
     },
 
     prev() {
+      if (this.disabled) return;
       const newVal = this.internalCurrentPage - 1;
       this.internalCurrentPage = this.getValidCurrentPage(newVal);
     },
 
     next() {
+      if (this.disabled) return;
       const newVal = this.internalCurrentPage + 1;
       this.internalCurrentPage = this.getValidCurrentPage(newVal);
     },

packages/theme-chalk/src/pagination.scss

@@ -87,6 +87,11 @@
     padding-left: 12px;    
   }
 
+  .el-pager li.disabled {
+    color: $--color-text-placeholder;
+    cursor: not-allowed;
+  }
+
   @include m(small) {
     .btn-prev,
     .btn-next,
@@ -173,6 +178,10 @@
       color: $--color-text-regular;
       min-width: 30px;
       border-radius: 2px;
+
+      &.disabled {
+        color: $--color-text-placeholder;
+      }
     }
 
     .btn-prev, .btn-next {
@@ -183,7 +192,7 @@
       }
     }
 
-    .el-pager li {
+    .el-pager li:not(.disabled) {
       &:hover {
         color: $--pagination-hover-fill;
       }
@@ -236,6 +245,10 @@
     &.btn-quickprev {
       line-height: 28px;
       color: $--pagination-button-color;
+
+      &.disabled {
+        color: $--color-text-placeholder;
+      }
     }
 
     &.btn-quickprev:hover {

yarn.lock

@@ -2434,6 +2434,10 @@ eslint-config-defaults@*:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/eslint-config-defaults/-/eslint-config-defaults-9.0.0.tgz#a090adc13b2935e3f43b3cd048a92701654e5ad5"
 
+eslint-config-elemefe@*:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-elemefe/-/eslint-config-elemefe-0.3.0.tgz#6f06cd6a8c6949bf58fa7fe2d4b4a4fde89bf008"
+
 eslint-config-elemefe@0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/eslint-config-elemefe/-/eslint-config-elemefe-0.1.1.tgz#5a1664ce3f7d91f68528b508d040044ae6c10aa3"