fix(pagination): emit event when change pageSize and close #279

varletjs · Jan 13, 2022 · f9a9be4 · f9a9be4
1 parent 354c140
commit f9a9be4
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 32 deletions.
diff --git a/packages/varlet-ui/src/pagination/Pagination.vue b/packages/varlet-ui/src/pagination/Pagination.vue
@@ -213,20 +213,21 @@ export default defineComponent({
     })
 
     watch(
-      [current, pageCount],
-      ([newCurrent, newCount], [oldCurrent, oldCount]) => {
-        if (newCurrent > newCount) {
-          current.value = newCount
+      [current, size],
+      ([newCurrent, newSize], [oldCurrent, oldSize]) => {
+        if (newCurrent > pageCount.value) {
+          current.value = pageCount.value
           return
         }
 
         let list = []
-        const { maxPagerCount } = props
-        const rEllipseSign = newCount - (maxPagerCount - activePosition.value) - 1
+        const { maxPagerCount, total, onChange } = props
+        const oldCount = Math.ceil(toNumber(total) / toNumber(oldSize))
+        const rEllipseSign = pageCount.value - (maxPagerCount - activePosition.value) - 1
         simpleValue.value = `${newCurrent}`
 
-        if (newCount - 2 > maxPagerCount) {
-          if (oldCurrent === undefined || newCount !== oldCount) {
+        if (pageCount.value - 2 > maxPagerCount) {
+          if (oldCurrent === undefined || pageCount.value !== oldCount) {
             for (let i = 2; i < maxPagerCount + 2; i++) list.push(i)
           }
 
@@ -258,21 +259,23 @@ export default defineComponent({
             list = []
 
             for (let i = 1; i < maxPagerCount + 1; i++) {
-              list.push(newCount - (maxPagerCount - i) - 1)
+              list.push(pageCount.value - (maxPagerCount - i) - 1)
             }
 
             isHideEllipsisHead.value = false
             isHideEllipsisTail.value = true
           }
 
-          list = [1, '...', ...list, '...', newCount]
+          list = [1, '...', ...list, '...', pageCount.value]
         } else {
-          for (let i = 1; i <= newCount; i++) list.push(i)
+          for (let i = 1; i <= pageCount.value; i++) list.push(i)
         }
 
         pageList.value = list
 
-        if (oldCurrent !== undefined) props.onChange?.(newCurrent, size.value)
+        if (oldCurrent !== undefined) onChange?.(newCurrent, newSize)
+        props['onUpdate:current']?.(newCurrent)
+        props['onUpdate:size']?.(newSize)
       },
       {
         immediate: true,

diff --git a/packages/varlet-ui/src/pagination/docs/en-US.md b/packages/varlet-ui/src/pagination/docs/en-US.md
@@ -129,18 +129,18 @@ import Disabled from '../example/Disabled.vue'
 
 ### Props
 
-| Prop | Description | Type | Default |
-| ----- | -------------- | -------- | ---------- |
-| `current` | Current page number | _string \| number_ | `1` |
-| `size` | Number of data items per page | _string \| number_ | `10` |
-| `total` | Total number of data items | _string \| number_ | `0` |
-| `simple` | Whether to use simple mode | _boolean_ | `true` |
-| `disabled` | Disable pagination | _boolean_ | `false` |
+| Prop                | Description | Type | Default |
+|---------------------| -------------- | -------- | ---------- |
+| `v-model: current`  | Current page number | _string \| number_ | `1` |
+| `v-model: size`     | Number of data items per page | _string \| number_ | `10` |
+| `total`             | Total number of data items | _string \| number_ | `0` |
+| `simple`            | Whether to use simple mode | _boolean_ | `true` |
+| `disabled`          | Disable pagination | _boolean_ | `false` |
 | `show-size-changer` | Whether to show `size` select | _boolean_ | `true` |
 | `show-quick-jumper` | Whether you can jump to pages directly	 | _boolean_ | `false` |
-| `max-pager-count` | Number of buttons displayed between ellipses	| _number_ | `3` |
-| `size-option` | Specify the sizeChanger options	 | _number[]_ | `[10, 20, 50, 100]` |
-| `show-total` | Show page item's title	 | _function(total, range)_ | `-` |
+| `max-pager-count`   | Number of buttons displayed between ellipses	| _number_ | `3` |
+| `size-option`       | Specify the sizeChanger options	 | _number[]_ | `[10, 20, 50, 100]` |
+| `show-total`        | Show page item's title	 | _function(total, range)_ | `-` |
 
 ### Events
 

diff --git a/packages/varlet-ui/src/pagination/docs/zh-CN.md b/packages/varlet-ui/src/pagination/docs/zh-CN.md
@@ -130,18 +130,18 @@ import Disabled from '../example/Disabled.vue'
 
 ### 属性
 
-| 参数 | 说明 | 类型 | 默认值 |
-| ----- | -------------- | -------- | ---------- |
-| `current` | 当前页数 | _string \| number_ | `1` |
-| `size` | 每页条数 | _string \| number_ | `10` |
-| `total` | 总条数 | _string \| number_ | `0` |
-| `simple` | 是否为简单模式 | _boolean_ | `true` |
-| `disabled` | 禁用分页 | _boolean_ | `false` |
+| 参数                  | 说明 | 类型 | 默认值 |
+|---------------------| -------------- | -------- | ---------- |
+| `v-model: current`  | 当前页数 | _string \| number_ | `1` |
+| `v-model: size`     | 每页条数 | _string \| number_ | `10` |
+| `total`             | 总条数 | _string \| number_ | `0` |
+| `simple`            | 是否为简单模式 | _boolean_ | `true` |
+| `disabled`          | 禁用分页 | _boolean_ | `false` |
 | `show-size-changer` | 是否显示 `size` 切换器 | _boolean_ | `true` |
 | `show-quick-jumper` | 是否可以快速跳转至某页	 | _boolean_ | `false` |
-| `max-pager-count` | 省略号间显示的按钮数量	 | _number_ | `3` |
-| `size-option` | 指定每页可以显示多少条	 | _number[]_ | `[10, 20, 50, 100]` |
-| `show-total` | 用于显示数据总量和当前数据顺序	 | _function(total, range)_ | `-` |
+| `max-pager-count`   | 省略号间显示的按钮数量	 | _number_ | `3` |
+| `size-option`       | 指定每页可以显示多少条	 | _number[]_ | `[10, 20, 50, 100]` |
+| `show-total`        | 用于显示数据总量和当前数据顺序	 | _function(total, range)_ | `-` |
 
 ### 事件
 

diff --git a/packages/varlet-ui/src/pagination/porps.ts b/packages/varlet-ui/src/pagination/porps.ts
@@ -44,4 +44,10 @@ export const props = {
   onChange: {
     type: Function as PropType<(current: number, size: number) => void>,
   },
+  'onUpdate:current': {
+    type: Function as PropType<(current: number) => void>,
+  },
+  'onUpdate:size': {
+    type: Function as PropType<(size: number) => void>,
+  },
 }
diff --git a/packages/varlet-ui/types/pagination.d.ts b/packages/varlet-ui/types/pagination.d.ts
@@ -14,6 +14,8 @@ export interface PaginationProps {
   sizeOption?: Array<number>
   showTotal?: (total: number, range: Range) => string
   onChange?: (current: number, size: number) => void
+  'onUpdate:current': (current: number) => void
+  'onUpdate:size': (size: number) => void
 }
 
 export class Pagination extends VarComponent {