update pagination

components/pagination/demo/changer.md

@@ -11,10 +11,28 @@ Change `pageSize`.
 
 ```html
 <template>
+  <div>
     <a-pagination showSizeChanger @showSizeChange="onShowSizeChange" :defaultCurrent="3" :total="500" />
+    <br/>
+    <a-pagination showSizeChanger :pageSize.sync="pageSize" @showSizeChange="onShowSizeChange" :total="500" v-model="current"/>
+  </div>
 </template>
 <script>
   export default {
+    data(){
+      return {
+        pageSize: 20,
+        current:4,
+      }
+    },
+    watch:{
+      pageSize(val) {
+        console.log('pageSize',val);
+      },
+      current(val) {
+        console.log('current',val);
+      }
+    },
     methods: {
       onShowSizeChange(current, pageSize) {
         console.log(current, pageSize);
@@ -22,10 +40,5 @@ Change `pageSize`.
     }
   }
 </script>
-<style scoped>
-  .ant-select {
-    margin-bottom: 0 !important;
-  }
-</style>
 ```
 

components/pagination/index.en-US.md

@@ -1,16 +1,16 @@
 ## API
 
 ```html
-<Pagination @change={onChange} :total="50" />
+<Pagination @change="onChange" :total="50" />
 ```
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| current | current page number | number | - |
+| current(v-model) | current page number | number | - |
 | defaultCurrent | default initial page number | number | 1 |
 | defaultPageSize | default number of data items per page | number | 10 |
 | hideOnSinglePage | Whether to hide pager on single page | boolean | false |
-| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
+| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - |
 | pageSize | number of data items per page | number | - |
 | pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] |
 | showQuickJumper | determine whether you can jump to pages directly | boolean | false |

components/pagination/index.zh-CN.md

@@ -1,7 +1,7 @@
 ## API
 
 ```html
-<Pagination @change={onChange} :total="50" />
+<Pagination @change="onChange" :total="50" />
 ```
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -10,7 +10,7 @@
 | defaultCurrent | 默认的当前页数 | number | 1 |
 | defaultPageSize | 默认的每页条数 | number | 10 |
 | hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
-| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
+| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - |
 | pageSize | 每页条数 | number | - |
 | pageSizeOptions | 指定每页可以显示多少条 | string\[] | ['10', '20', '30', '40'] |
 | showQuickJumper | 是否可以快速跳转至某页 | boolean | false |

components/vc-pagination/Pagination.vue

@@ -82,7 +82,7 @@ export default {
     },
     pageSize (val) {
       const newState = {}
-      let current = this.current
+      let current = this.stateCurrent
       const newCurrent = this.calculatePage(val)
       current = current > newCurrent ? newCurrent : current
       if (!hasProp(this, 'current')) {
@@ -174,7 +174,9 @@ export default {
           })
         }
       }
+      this.$emit('update:pageSize', size)
       this.$emit('showSizeChange', current, size)
+      this.$emit('change', current, size)
     },
     handleChange (p) {
       let page = p
@@ -241,7 +243,6 @@ export default {
     let firstPager = null
     let lastPager = null
     let gotoButton = null
-
     const goButton = (this.showQuickJumper && this.showQuickJumper.goButton)
     const pageBufferSize = this.showLessItems ? 1 : 2
     const { stateCurrent, statePageSize } = this
@@ -320,7 +321,6 @@ export default {
         </ul>
       )
     }
-
     if (allPages <= 5 + pageBufferSize * 2) {
       for (let i = 1; i <= allPages; i++) {
         const active = stateCurrent === i

webpack.base.config.js

@@ -94,7 +94,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
       </script>
       ` : ''
     newContent += style ? `
-      <style>
+      <style scoped>
       ${style || ''}
       </style>
       ` : ''