Page add disabled prop

examples/routers/page.vue

@@ -7,10 +7,11 @@
         <Page :current="2" :total="50" simple></Page>
 
         <div style="margin:10px 0px">
-            <Page :total="1000"  show-sizer show-elevator show-total  :current="12"></Page>
+            <Page :total="1000" show-sizer show-elevator show-total  :current="12"></Page>
         </div>
         <div style="margin:10px 0px">
-            <Page :total="1000" show-sizer show-elevator show-total  :current="12"></Page>
+            <Page disabled :total="1000" show-sizer show-elevator show-total  :current="12"></Page>
+            <Page :current="2" :total="50" simple disabled />
         </div>
         <div style="margin:100px 0px">
             <Page :total="500" show-sizer show-elevator show-total  ></Page>

src/components/page/options.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="showSizer || showElevator" :class="optsClasses">
         <div v-if="showSizer" :class="sizerClasses">
-            <i-select v-model="currentPageSize" :size="size" :placement="placement" :transfer="transfer" @on-change="changeSize">
+            <i-select v-model="currentPageSize" :size="size" :placement="placement" :transfer="transfer" :disabled="disabled" @on-change="changeSize">
                 <i-option v-for="item in pageSizeOpts" :key="item" :value="item" style="text-align:center;">{{ item }} {{ t('i.page.page') }}</i-option>
             </i-select>
         </div>
@@ -12,6 +12,7 @@
               :value="_current"
               autocomplete="off"
               spellcheck="false"
+              :disabled="disabled"
               @keyup.enter="changePage"
             >
             {{ t('i.page.p') }}
@@ -43,7 +44,8 @@
             allPages: Number,
             isSmall: Boolean,
             placement: String,
-            transfer: Boolean
+            transfer: Boolean,
+            disabled: Boolean
         },
         data () {
             return {

src/components/page/page.vue

@@ -12,6 +12,7 @@
                 :value="currentPage"
                 autocomplete="off"
                 spellcheck="false"
+                :disabled="disabled"
                 @keydown="keyDown"
                 @keyup="keyUp"
                 @change="keyUp">
@@ -61,6 +62,7 @@
             :show-elevator="showElevator"
             :_current.once="currentPage"
             :current="currentPage"
+            :disabled="disabled"
             :all-pages="allPages"
             :is-small="isSmall"
             @on-size="onSize"
@@ -144,6 +146,10 @@
             nextText: {
                 type: String,
                 default: ''
+            },
+            disabled: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -192,6 +198,7 @@
                     `${prefixCls}`,
                     {
                         [`${this.className}`]: !!this.className,
+                        [`${prefixCls}-with-disabled`]: this.disabled,
                         'mini': !!this.size
                     }
                 ];
@@ -200,7 +207,7 @@
                 return [
                     `${prefixCls}-prev`,
                     {
-                        [`${prefixCls}-disabled`]: this.currentPage === 1,
+                        [`${prefixCls}-disabled`]: this.currentPage === 1 || this.disabled,
                         [`${prefixCls}-custom-text`]: this.prevText !== ''
                     }
                 ];
@@ -209,7 +216,7 @@
                 return [
                     `${prefixCls}-next`,
                     {
-                        [`${prefixCls}-disabled`]: this.currentPage === this.allPages,
+                        [`${prefixCls}-disabled`]: this.currentPage === this.allPages || this.disabled,
                         [`${prefixCls}-custom-text`]: this.nextText !== ''
                     }
                 ];
@@ -233,6 +240,7 @@
         },
         methods: {
             changePage (page) {
+                if (this.disabled) return;
                 if (this.currentPage != page) {
                     this.currentPage = page;
                     this.$emit('update:current', page);
@@ -240,6 +248,7 @@
                 }
             },
             prev () {
+                if (this.disabled) return;
                 const current = this.currentPage;
                 if (current <= 1) {
                     return false;
@@ -247,6 +256,7 @@
                 this.changePage(current - 1);
             },
             next () {
+                if (this.disabled) return;
                 const current = this.currentPage;
                 if (current >= this.allPages) {
                     return false;
@@ -254,6 +264,7 @@
                 this.changePage(current + 1);
             },
             fastPrev () {
+                if (this.disabled) return;
                 const page = this.currentPage - 5;
                 if (page > 0) {
                     this.changePage(page);
@@ -262,6 +273,7 @@
                 }
             },
             fastNext () {
+                if (this.disabled) return;
                 const page = this.currentPage + 5;
                 if (page > this.allPages) {
                     this.changePage(this.allPages);
@@ -270,11 +282,13 @@
                 }
             },
             onSize (pageSize) {
+                if (this.disabled) return;
                 this.currentPageSize = pageSize;
                 this.$emit('on-page-size-change', pageSize);
                 this.changePage(1);
             },
             onPage (page) {
+                if (this.disabled) return;
                 this.changePage(page);
             },
             keyDown (e) {

src/styles/components/page.less

@@ -54,6 +54,29 @@
         }
     }
 
+    &-with-disabled &-item, &-with-disabled &-disabled{
+        cursor: @cursor-disabled;
+        background-color: @input-disabled-bg;
+        a {
+            color: #ccc;
+        }
+        &:hover {
+            border-color: @border-color-base;
+            a {
+                color: #ccc;
+                cursor: @cursor-disabled;
+            }
+        }
+        &-active {
+            background-color: @border-color-base;
+            border-color: @border-color-base;
+
+            a, &:hover a {
+                color: #fff;
+            }
+        }
+    }
+
     &-item-jump-prev, &-item-jump-next {
         &:after {
             content: "•••";
@@ -77,6 +100,18 @@
         }
     }
 
+    &-with-disabled &-item-jump-prev, &-with-disabled &-item-jump-next{
+        cursor: @cursor-disabled;
+        &:hover {
+            &:after{
+                display: block;
+            }
+            i{
+                display: none;
+            }
+        }
+    }
+
     &-item-jump-prev:hover {
         i:after {
             content: "\F115";
@@ -208,6 +243,7 @@
         vertical-align: middle;
 
         input {
+            .input;
             width: 30px;
             height: 24px;
             margin: 0 8px;