feat(components): [pagination] btns icon can be customized Vuecomponent (#9372)

closed #9300
This commit is contained in:
LIUCHAO 2022-08-19 13:32:29 +08:00 committed by GitHub
parent 6ac49834ef
commit 3d13c14ae7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 66 additions and 24 deletions

View File

@ -63,24 +63,26 @@ pagination/more-elements
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------ | -------------------------------------- |
| small | whether to use small pagination | boolean | — | false |
| background | whether the buttons have a background color | boolean | — | false |
| page-size | item count of each page, supports the v-model bidirectional binding | number | — | 10 |
| default-page-size | default initial value of page size | number | - | - |
| total | total item count | number | — | — |
| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | odd number between 5 and 21 | 7 |
| current-page | current page number, supports the v-model bidirectional binding | number | — | 1 |
| default-current-page | default initial value of current-page | number | - | - |
| layout | layout of Pagination, elements separated with a comma | string | `sizes` / `prev` / `pager` / `next` / `jumper` / `->` / `total` / `slot` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | custom class name for the page size Select's dropdown | string | — | — |
| prev-text | text for the prev button | string | — | — |
| next-text | text for the next button | string | — | — |
| disabled | whether Pagination is disabled | boolean | — | false |
| hide-on-single-page | whether to hide when there's only one page | boolean | — | - |
| Attribute | Description | Type | Accepted Values | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------ | -------------------------------------- |
| small | whether to use small pagination | boolean | — | false |
| background | whether the buttons have a background color | boolean | — | false |
| page-size | item count of each page, supports the v-model bidirectional binding | number | — | 10 |
| default-page-size | default initial value of page size | number | - | - |
| total | total item count | number | — | — |
| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | odd number between 5 and 21 | 7 |
| current-page | current page number, supports the v-model bidirectional binding | number | — | 1 |
| default-current-page | default initial value of current-page | number | - | - |
| layout | layout of Pagination, elements separated with a comma | string | `sizes` / `prev` / `pager` / `next` / `jumper` / `->` / `total` / `slot` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | custom class name for the page size Select's dropdown | string | — | — |
| prev-text | text for the prev button | string | — | — |
| prev-icon | icon for the prev button, higher priority of `prev-text` | Component | — | ArrowLeft |
| next-text | text for the next button | string | — | — |
| next-icon | icon for the next button, higher priority of `next-text` | Component | — | ArrowRight |
| disabled | whether Pagination is disabled | boolean | — | false |
| hide-on-single-page | whether to hide when there's only one page | boolean | — | - |
:::warning

View File

@ -1,6 +1,7 @@
import { nextTick, ref } from 'vue'
import { mount } from '@vue/test-utils'
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
import Pagination from '../src/pagination'
import selectDropdownVue from '../../select/src/select-dropdown.vue'
import type { VueWrapper } from '@vue/test-utils'
@ -174,6 +175,25 @@ describe('Pagination', () => {
await nextTick()
expect(wrapper.find('.el-pagination').exists()).toBe(false)
})
test('test custom icon', async () => {
const wrapper = mount(() => (
<Pagination
layout="prev, pager, next"
total={1000}
prev-icon={CaretLeft}
next-icon={CaretRight}
/>
))
const btnPrev = wrapper.findComponent(CaretLeft).element
const caretLeftIcon = mount(CaretLeft).find('svg').element
expect(btnPrev.innerHTML).toBe(caretLeftIcon.innerHTML)
const nextPrev = wrapper.findComponent(CaretRight).element
const caretRightIcon = mount(CaretRight).find('svg').element
expect(nextPrev.innerHTML).toBe(caretRightIcon.innerHTML)
})
})
describe('test pageSize & currentPage reactive change', () => {

View File

@ -1,4 +1,4 @@
import { buildProps } from '@element-plus/utils'
import { buildProps, iconPropType } from '@element-plus/utils'
import type { ExtractPropTypes } from 'vue'
import type Next from './next.vue'
@ -15,6 +15,9 @@ export const paginationNextProps = buildProps({
nextText: {
type: String,
},
nextIcon: {
type: iconPropType,
},
} as const)
export type PaginationNextProps = ExtractPropTypes<typeof paginationNextProps>

View File

@ -7,14 +7,15 @@
@click="$emit('click', $event)"
>
<span v-if="nextText">{{ nextText }}</span>
<el-icon v-else><arrow-right /></el-icon>
<el-icon v-else>
<component :is="nextIcon" />
</el-icon>
</button>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { ElIcon } from '@element-plus/components/icon'
import { ArrowRight } from '@element-plus/icons-vue'
import { paginationNextProps } from './next'
defineOptions({

View File

@ -1,4 +1,4 @@
import { buildProps } from '@element-plus/utils'
import { buildProps, iconPropType } from '@element-plus/utils'
import type { ExtractPropTypes } from 'vue'
import type Prev from './prev.vue'
@ -11,6 +11,9 @@ export const paginationPrevProps = buildProps({
prevText: {
type: String,
},
prevIcon: {
type: iconPropType,
},
} as const)
export const paginationPrevEmits = {

View File

@ -7,14 +7,15 @@
@click="$emit('click', $event)"
>
<span v-if="prevText">{{ prevText }}</span>
<el-icon v-else><arrow-left /></el-icon>
<el-icon v-else>
<component :is="prevIcon" />
</el-icon>
</button>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { ElIcon } from '@element-plus/components/icon'
import { ArrowLeft } from '@element-plus/icons-vue'
import { paginationPrevEmits, paginationPrevProps } from './prev'
defineOptions({

View File

@ -7,10 +7,12 @@ import {
ref,
watch,
} from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import {
buildProps,
debugWarn,
definePropType,
iconPropType,
mutable,
} from '@element-plus/utils'
import { useLocale, useNamespace } from '@element-plus/hooks'
@ -80,10 +82,18 @@ export const paginationProps = buildProps({
type: String,
default: '',
},
prevIcon: {
type: iconPropType,
default: () => ArrowLeft,
},
nextText: {
type: String,
default: '',
},
nextIcon: {
type: iconPropType,
default: () => ArrowRight,
},
small: Boolean,
background: Boolean,
disabled: Boolean,
@ -278,6 +288,7 @@ export default defineComponent({
disabled: props.disabled,
currentPage: currentPageBridge.value,
prevText: props.prevText,
prevIcon: props.prevIcon,
onClick: prev,
}),
jumper: h(Jumper),
@ -293,6 +304,7 @@ export default defineComponent({
currentPage: currentPageBridge.value,
pageCount: pageCountBridge.value,
nextText: props.nextText,
nextIcon: props.nextIcon,
onClick: next,
}),
sizes: h(Sizes, {