mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
feat(pagination) : add size prop (#16858)
* fix(components): [table] closed #11023 * fix(components): add component prop 'size' and related style supplement BREAKING CHANGE : size closed #16830 * Update component documentation * Update documentation and tests * Optimized using useFormSize * Keep the 'small' api for now * Eliminate unwanted code * Eliminate the impact of errors * Remove 'ref' * Update docs/examples/pagination/more-elements.vue Co-authored-by: qiang <qw13131wang@gmail.com> * Modify documents and declarations * Eliminate uselessness * Update packages/components/pagination/src/pagination.ts Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> * Update docs/en-US/component/pagination.md Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> * Update packages/components/pagination/src/pagination.ts Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> * Adjust public access * pass Lint * Modify attribute acquisition * change the source of 'size' * remove `pagination-font-size-large` * Lift response * Update packages/theme-chalk/src/common/var.scss Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> * Update pagination.ts * Update docs/examples/pagination/more-elements.vue --------- Co-authored-by: yang <29636098325@qq.com> Co-authored-by: qiang <qw13131wang@gmail.com> Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> Co-authored-by: btea <2356281422@qq.com>
This commit is contained in:
yang
GitHub
parent
03e8be2657
commit
a8a2298a6d
@ -35,7 +35,7 @@ pagination/background-color
|
||||
|
||||
Use small pagination in the case of limited space.
|
||||
|
||||
:::demo Just set the `small` attribute to `true` and the Pagination becomes smaller.
|
||||
:::demo set size to change the `size`. Here is a demonstration of `small`
|
||||
|
||||
pagination/small-pagination
|
||||
|
||||
@ -67,7 +67,8 @@ pagination/more-elements
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------ |
|
||||
| small | whether to use small pagination | ^[boolean] | false |
|
||||
| small ^(deprecated) | whether to use small pagination | ^[boolean] | false |
|
||||
| size ^(2.7.6) | pagination size | ^[enum]`'large'\| 'default'\| 'small'` | 'default' |
|
||||
| background | whether the buttons have a background color | ^[boolean] | false |
|
||||
| page-size / v-model:page-size | item count of each page | ^[number] | — |
|
||||
| default-page-size | default initial value of page size, not setting is the same as setting 10 | ^[number] | — |
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<div class="flex items-center mb-4">
|
||||
<el-radio-group v-model="small" class="mr-4">
|
||||
<el-radio-button :value="false">default</el-radio-button>
|
||||
<el-radio-button :value="true">small</el-radio-button>
|
||||
<el-radio-group v-model="size" class="mr-4">
|
||||
<el-radio-button value="default">default</el-radio-button>
|
||||
<el-radio-button value="large">large</el-radio-button>
|
||||
|
||||
<el-radio-button value="small">small</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div>
|
||||
background:
|
||||
@ -20,7 +22,7 @@
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage1"
|
||||
:page-size="100"
|
||||
:small="small"
|
||||
:size="size"
|
||||
:disabled="disabled"
|
||||
:background="background"
|
||||
layout="total, prev, pager, next"
|
||||
@ -35,7 +37,7 @@
|
||||
v-model:current-page="currentPage2"
|
||||
v-model:page-size="pageSize2"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:small="small"
|
||||
:size="size"
|
||||
:disabled="disabled"
|
||||
:background="background"
|
||||
layout="sizes, prev, pager, next"
|
||||
@ -49,7 +51,7 @@
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage3"
|
||||
v-model:page-size="pageSize3"
|
||||
:small="small"
|
||||
:size="size"
|
||||
:disabled="disabled"
|
||||
:background="background"
|
||||
layout="prev, pager, next, jumper"
|
||||
@ -64,7 +66,7 @@
|
||||
v-model:current-page="currentPage4"
|
||||
v-model:page-size="pageSize4"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:small="small"
|
||||
:size="size"
|
||||
:disabled="disabled"
|
||||
:background="background"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@ -76,7 +78,7 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
import type { ComponentSize } from 'element-plus'
|
||||
const currentPage1 = ref(5)
|
||||
const currentPage2 = ref(5)
|
||||
const currentPage3 = ref(5)
|
||||
@ -84,7 +86,7 @@ const currentPage4 = ref(4)
|
||||
const pageSize2 = ref(100)
|
||||
const pageSize3 = ref(100)
|
||||
const pageSize4 = ref(100)
|
||||
const small = ref(false)
|
||||
const size = ref<ComponentSize>('default')
|
||||
const background = ref(false)
|
||||
const disabled = ref(false)
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-pagination small layout="prev, pager, next" :total="50" />
|
||||
<el-pagination size="small" layout="prev, pager, next" :total="50" />
|
||||
<el-pagination
|
||||
small
|
||||
size="small"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="50"
|
||||
|
||||
@ -141,7 +141,7 @@ describe('Pagination', () => {
|
||||
|
||||
test('test small layout', () => {
|
||||
const wrapper = mount(() => (
|
||||
<Pagination total={100} small={true}></Pagination>
|
||||
<Pagination total={100} size="small"></Pagination>
|
||||
))
|
||||
|
||||
expect(wrapper.vm.$el.classList.contains('el-pagination--small')).toBe(
|
||||
|
||||
@ -16,7 +16,12 @@ import {
|
||||
isNumber,
|
||||
mutable,
|
||||
} from '@element-plus/utils'
|
||||
import { useLocale, useNamespace } from '@element-plus/hooks'
|
||||
import {
|
||||
useDeprecated,
|
||||
useLocale,
|
||||
useNamespace,
|
||||
useSizeProp,
|
||||
} from '@element-plus/hooks'
|
||||
import { elPaginationKey } from './constants'
|
||||
|
||||
import Prev from './components/prev.vue'
|
||||
@ -25,9 +30,7 @@ import Sizes from './components/sizes.vue'
|
||||
import Jumper from './components/jumper.vue'
|
||||
import Total from './components/total.vue'
|
||||
import Pager from './components/pager.vue'
|
||||
|
||||
import type { ExtractPropTypes, VNode } from 'vue'
|
||||
|
||||
/**
|
||||
* It it user's responsibility to guarantee that the value of props.total... is number
|
||||
* (same as pageSize, defaultPageSize, currentPage, defaultCurrentPage, pageCount)
|
||||
@ -148,6 +151,10 @@ export const paginationProps = buildProps({
|
||||
* @description whether to use small pagination
|
||||
*/
|
||||
small: Boolean,
|
||||
/**
|
||||
* @description set page size
|
||||
*/
|
||||
size: useSizeProp,
|
||||
/**
|
||||
* @description whether the buttons have a background color
|
||||
*/
|
||||
@ -186,6 +193,17 @@ export default defineComponent({
|
||||
const { t } = useLocale()
|
||||
const ns = useNamespace('pagination')
|
||||
const vnodeProps = getCurrentInstance()!.vnode.props || {}
|
||||
const _size = computed(() => (props.small ? 'small' : props?.size))
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'small',
|
||||
replacement: 'size',
|
||||
version: '3.0.0',
|
||||
scope: 'el-pagination',
|
||||
ref: 'https://element-plus.org/zh-CN/component/pagination.html',
|
||||
},
|
||||
computed(() => !!props.small)
|
||||
)
|
||||
// we can find @xxx="xxx" props on `vnodeProps` to check if user bind corresponding events
|
||||
const hasCurrentPageListener =
|
||||
'onUpdate:currentPage' in vnodeProps ||
|
||||
@ -364,7 +382,7 @@ export default defineComponent({
|
||||
onClick: prev,
|
||||
}),
|
||||
jumper: h(Jumper, {
|
||||
size: props.small ? 'small' : 'default',
|
||||
size: _size.value,
|
||||
}),
|
||||
pager: h(Pager, {
|
||||
currentPage: currentPageBridge.value,
|
||||
@ -387,7 +405,7 @@ export default defineComponent({
|
||||
popperClass: props.popperClass,
|
||||
disabled: props.disabled,
|
||||
teleported: props.teleported,
|
||||
size: props.small ? 'small' : 'default',
|
||||
size: _size.value,
|
||||
}),
|
||||
slot: slots?.default?.() ?? null,
|
||||
total: h(Total, { total: isAbsent(props.total) ? 0 : props.total }),
|
||||
@ -428,9 +446,7 @@ export default defineComponent({
|
||||
class: [
|
||||
ns.b(),
|
||||
ns.is('background', props.background),
|
||||
{
|
||||
[ns.m('small')]: props.small,
|
||||
},
|
||||
ns.m(_size.value),
|
||||
],
|
||||
},
|
||||
rootChildren
|
||||
|
||||
@ -923,6 +923,8 @@ $pagination: map.merge(
|
||||
'font-size-small': 12px,
|
||||
'button-width-small': 24px,
|
||||
'button-height-small': 24px,
|
||||
'button-width-large': 40px,
|
||||
'button-height-large': 40px,
|
||||
'item-gap': 16px,
|
||||
),
|
||||
$pagination
|
||||
|
||||
@ -208,6 +208,19 @@
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
@include m(large) {
|
||||
.btn-prev,
|
||||
.btn-next,
|
||||
.#{$namespace}-pager li {
|
||||
height: getCssVar('pagination-button-height-large');
|
||||
line-height: getCssVar('pagination-button-height-large');
|
||||
min-width: getCssVar('pagination-button-width-large');
|
||||
}
|
||||
|
||||
.#{$namespace}-select .#{$namespace}-input {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(pager) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user