support Page

support Page

CHANGE.md

@@ -42,4 +42,6 @@ Menu 的 activeKey 改为 activeName,openKeys 改为 openNames
 ### Cascader
 Caspanel 的 sublist 从 prop -> data
 ### Select
-model 改为 value，支持 v-model
+model 改为 value，支持 v-model
+### Page
+class 改为 className

README.md

@@ -52,7 +52,7 @@
 - [x] Menu
 - [x] Tabs
 - [x] Dropdown
-- [ ] Page
+- [x] Page
 - [x] Breadcrumb
 - [x] Steps
 - [ ] LoadingBar

examples/app.vue

@@ -44,6 +44,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/spin">Spin</router-link></li>
                 <li><router-link to="/cascader">Cascader</router-link></li>
                 <li><router-link to="/select">Select</router-link></li>
+                <li><router-link to="/page">Page</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

examples/main.js

@@ -140,6 +140,10 @@ const router = new VueRouter({
         {
             path: '/select',
             component: require('./routers/select.vue')
+        },
+        {
+            path: '/page',
+            component: require('./routers/page.vue')
         }
     ]
 });

examples/routers/page.vue

@@ -1,9 +1,11 @@
 <template>
-    <Page :total="1000" show-sizer show-elevator show-total class="classr" :style="{float: 'right'}" @on-page-size-change="pc"></Page>
+    <div>
-    <br><br>
+        <Page :total="1000" show-sizer show-elevator show-total class="classr" :style="{float: 'right'}" @on-page-size-change="pc"></Page>
-    <Page :total="1000" show-sizer show-elevator show-total size="small" class="classr2"></Page>
+        <br><br>
-    <br><br>
+        <Page :total="1000" show-sizer show-elevator show-total size="small" class="classr2"></Page>
-    <Page :current="2" :total="50" simple></Page>
+        <br><br>
+        <Page :current="2" :total="50" simple></Page>
+    </div>
 </template>
 <script>
     import { Page } from 'iview';

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 :model.sync="pageSize" :size="size" @on-change="changeSize">
+            <i-select v-model="currentPageSize" :size="size" @on-change="changeSize">
                 <i-option v-for="item in pageSizeOpts" :value="item" style="text-align:center;">{{ item }} {{ t('i.page.page') }}</i-option>
             </i-select>
         </div>
@@ -24,6 +24,7 @@
     }
 
     export default {
+        name: 'PageOption',
         mixins: [ Locale ],
         components: { iSelect, iOption },
         props: {
@@ -36,6 +37,16 @@
             allPages: Number,
             isSmall: Boolean
         },
+        data () {
+            return {
+                currentPageSize: this.pageSize
+            }
+        },
+        watch: {
+            pageSize (val) {
+                this.currentPageSize = val;
+            }
+        },
         computed: {
             size () {
                 return this.isSmall ? 'small' : 'default';
@@ -58,7 +69,7 @@
         },
         methods: {
             changeSize () {
-                this.$emit('on-size', this.pageSize);
+                this.$emit('on-size', this.currentPageSize);
             },
             changePage (event) {
                 let val = event.target.value.trim();
@@ -86,4 +97,4 @@
             }
         }
     };
-</script>
+</script>

src/components/page/page.vue

@@ -6,10 +6,10 @@
             @click="prev">
             <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
         </li>
-        <div :class="simplePagerClasses" :title="current + '/' + allPages">
+        <div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
             <input
                 type="text"
-                :value="current"
+                :value="currentPage"
                 @keydown="keyDown"
                 @keyup="keyUp"
                 @change="keyUp">
@@ -34,13 +34,13 @@
             <a><i 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="current - 3 > 1" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></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>
-        <li :title="current - 2" v-if="current - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 2)"><a>{{ current - 2 }}</a></li>
+        <li :title="currentPage - 2" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</a></li>
-        <li :title="current - 1" v-if="current - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 1)"><a>{{ current - 1 }}</a></li>
+        <li :title="currentPage - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
-        <li :title="current" v-if="current != 1 && current != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ current }}</a></li>
+        <li :title="currentPage" v-if="currentPage != 1 && currentPage != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</a></li>
-        <li :title="current + 1" v-if="current + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 1)"><a>{{ current + 1 }}</a></li>
+        <li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
-        <li :title="current + 2" v-if="current + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 2)"><a>{{ current + 2 }}</a></li>
+        <li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li>
-        <li :title="t('i.page.next5')" v-if="current + 3 < allPages" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li>
+        <li :title="t('i.page.next5')" v-if="currentPage + 3 < allPages" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li>
         <li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
         <li
             :title="t('i.page.next')"
@@ -50,11 +50,11 @@
         </li>
         <Options
             :show-sizer="showSizer"
-            :page-size="pageSize"
+            :page-size="currentPageSize"
             :page-size-opts="pageSizeOpts"
             :show-elevator="showElevator"
-            :_current.once="current"
+            :_current.once="currentPage"
-            :current.sync="current"
+            :current="currentPage"
             :all-pages="allPages"
             :is-small="isSmall"
             @on-size="onSize"
@@ -70,6 +70,7 @@
     const prefixCls = 'ivu-page';
 
     export default {
+        name: 'Page',
         mixins: [ Locale ],
         components: { Options },
         props: {
@@ -112,7 +113,7 @@
                 type: Boolean,
                 default: false
             },
-            class: {
+            className: {
                 type: String
             },
             style: {
@@ -121,15 +122,25 @@
         },
         data () {
             return {
-                prefixCls: prefixCls
+                prefixCls: prefixCls,
+                currentPage: this.current,
+                currentPageSize: this.pageSize
             };
         },
+        watch: {
+            current (val) {
+                this.currentPage = val;
+            },
+            pageSize (val) {
+                this.currentPageSize = val;
+            }
+        },
         computed: {
             isSmall () {
                 return !!this.size;
             },
             allPages () {
-                const allPage = Math.ceil(this.total / this.pageSize);
+                const allPage = Math.ceil(this.total / this.currentPageSize);
                 return (allPage === 0) ? 1 : allPage;
             },
             simpleWrapClasses () {
@@ -137,7 +148,7 @@
                     `${prefixCls}`,
                     `${prefixCls}-simple`,
                     {
-                        [`${this.class}`]: !!this.class
+                        [`${this.className}`]: !!this.className
                     }
                 ];
             },
@@ -148,7 +159,7 @@
                 return [
                     `${prefixCls}`,
                     {
-                        [`${this.class}`]: !!this.class,
+                        [`${this.className}`]: !!this.className,
                         'mini': !!this.size
                     }
                 ];
@@ -157,7 +168,7 @@
                 return [
                     `${prefixCls}-prev`,
                     {
-                        [`${prefixCls}-disabled`]: this.current === 1
+                        [`${prefixCls}-disabled`]: this.currentPage === 1
                     }
                 ];
             },
@@ -165,7 +176,7 @@
                 return [
                     `${prefixCls}-next`,
                     {
-                        [`${prefixCls}-disabled`]: this.current === this.allPages
+                        [`${prefixCls}-disabled`]: this.currentPage === this.allPages
                     }
                 ];
             },
@@ -173,7 +184,7 @@
                 return [
                     `${prefixCls}-item`,
                     {
-                        [`${prefixCls}-item-active`]: this.current === 1
+                        [`${prefixCls}-item-active`]: this.currentPage === 1
                     }
                 ];
             },
@@ -181,34 +192,34 @@
                 return [
                     `${prefixCls}-item`,
                     {
-                        [`${prefixCls}-item-active`]: this.current === this.allPages
+                        [`${prefixCls}-item-active`]: this.currentPage === this.allPages
                     }
                 ];
             }
         },
         methods: {
             changePage (page) {
-                if (this.current != page) {
+                if (this.currentPage != page) {
-                    this.current = page;
+                    this.currentPage = page;
                     this.$emit('on-change', page);
                 }
             },
             prev () {
-                const current = this.current;
+                const current = this.currentPage;
                 if (current <= 1) {
                     return false;
                 }
                 this.changePage(current - 1);
             },
             next () {
-                const current = this.current;
+                const current = this.currentPage;
                 if (current >= this.allPages) {
                     return false;
                 }
                 this.changePage(current + 1);
             },
             fastPrev () {
-                const page = this.current - 5;
+                const page = this.currentPage - 5;
                 if (page > 0) {
                     this.changePage(page);
                 } else {
@@ -216,7 +227,7 @@
                 }
             },
             fastNext () {
-                const page = this.current + 5;
+                const page = this.currentPage + 5;
                 if (page > this.allPages) {
                     this.changePage(this.allPages);
                 } else {
@@ -224,7 +235,7 @@
                 }
             },
             onSize (pageSize) {
-                this.pageSize = pageSize;
+                this.currentPageSize = pageSize;
                 this.changePage(1);
                 this.$emit('on-page-size-change', pageSize);
             },

src/index.js

@@ -24,7 +24,7 @@ import Menu from './components/menu';
 // import Message from './components/message';
 // import Modal from './components/modal';
 // import Notice from './components/notice';
-// import Page from './components/page';
+import Page from './components/page';
 import Poptip from './components/poptip';
 import Progress from './components/progress';
 import Radio from './components/radio';
@@ -85,7 +85,7 @@ const iview = {
     // Notice,
     iOption: Option,
     OptionGroup,
-    // Page,
+    Page,
     Panel: Collapse.Panel,
     Poptip,
     Progress,