Page add prev-text and next-text prop

梁灏
1 parent 1a4a76e9
Showing 3 changed files with 20 additions and 5 deletions Show diff stats
examples/routers/page.vue
src/components/page/page.vue
src/styles/components/page.less
 <template>
     <div>
-        <Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page>
+        <Page prev-text="上一页" next-text="下一页" :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page>
         {{ current }}
         <Button type="primary" @click="subject">- 1</Button>
         <Button type="primary" @click="change">Change</Button>
@@ -33,7 +33,7 @@
             :title="t('i.page.prev')"
             :class="prevClasses"
             @click="prev">
-            <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
+            <a><template v-if="prevText !== ''">{{ prevText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
         </li>
         <li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
         <li :title="t('i.page.prev5')" v-if="currentPage - 3 > 1" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li>
@@ -48,7 +48,7 @@
             :title="t('i.page.next')"
             :class="nextClasses"
             @click="next">
-            <a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
+            <a><template v-if="nextText !== ''">{{ nextText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
         </li>
         <Options
             :show-sizer="showSizer"
@@ -132,6 +132,14 @@
             },
             styles: {
                 type: Object
+            },
+            prevText: {
+                type: String,
+                default: ''
+            },
+            nextText: {
+                type: String,
+                default: ''
             }
         },
         data () {
@@ -188,7 +196,8 @@
                 return [
                     `${prefixCls}-prev`,
                     {
-                        [`${prefixCls}-disabled`]: this.currentPage === 1
+                        [`${prefixCls}-disabled`]: this.currentPage === 1,
+                        [`${prefixCls}-custom-text`]: this.prevText !== ''
                     }
                 ];
             },
@@ -196,7 +205,8 @@
                 return [
                     `${prefixCls}-next`,
                     {
-                        [`${prefixCls}-disabled`]: this.currentPage === this.allPages
+                        [`${prefixCls}-disabled`]: this.currentPage === this.allPages,
+                        [`${prefixCls}-custom-text`]: this.nextText !== ''
                     }
                 ];
             },
@@ -103,6 +103,7 @@
     &-item-jump-next {
         display: inline-block;
         vertical-align: middle;
+        user-select: none;
         //float: left;
         min-width: @btn-circle-size;
         height: @btn-circle-size;
@@ -224,6 +225,10 @@
             padding: 0 8px 0 2px;
         }
     }
+
+    &-custom-text, &-custom-text:hover{
+        border-color: transparent;
+    }
 }
  
 .@{page-prefix-cls} {