From f9a9be4a628c30c8886f1398182be9313ef8c587 Mon Sep 17 00:00:00 2001 From: BeADre Date: Thu, 13 Jan 2022 15:35:07 +0800 Subject: [PATCH] fix(pagination): emit event when change pageSize and close #279 --- .../varlet-ui/src/pagination/Pagination.vue | 27 ++++++++++--------- .../varlet-ui/src/pagination/docs/en-US.md | 20 +++++++------- .../varlet-ui/src/pagination/docs/zh-CN.md | 20 +++++++------- packages/varlet-ui/src/pagination/porps.ts | 6 +++++ packages/varlet-ui/types/pagination.d.ts | 2 ++ 5 files changed, 43 insertions(+), 32 deletions(-) diff --git a/packages/varlet-ui/src/pagination/Pagination.vue b/packages/varlet-ui/src/pagination/Pagination.vue index a817f784117..d7ab39c8db4 100644 --- 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 index 0045694762c..7175267822e 100644 --- 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 index 4ef587fa376..bec53bd85bf 100644 --- 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 index 9885a3ae996..6f5ad8dae41 100644 --- 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 index 467f308ddad..6b2a84b453b 100644 --- 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 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 {