mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 12:48:04 +08:00
feat(components): [pagination] btns icon can be customized Vuecomponent (#9372)
closed #9300
This commit is contained in:
LIUCHAO
GitHub
parent
6ac49834ef
commit
3d13c14ae7
@ -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
|
||||
|
||||
|
||||
@ -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', () => {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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, {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user