mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-03-13 15:57:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [carousel] add cardScale prop (#17621)

Browse Source 
* feat: add params

* docs: add content

* perf: code

* ci: again test
This commit is contained in:
sea 2024-07-25 14:31:37 +08:00 committed by GitHub
parent 2564007850
commit a11a7d09dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/en-US/component/carousel.md
View File

@ -89,6 +89,7 @@ carousel/vertical
| indicator-position | position of the indicators | ^[enum]`'' \| 'none' \| 'outside'` | '' |
| arrow | when arrows are shown | ^[enum]`'always' \| 'hover' \| 'never'` | hover |
| type | type of the Carousel | ^[enum]`'' \| 'card'` | '' |
| cardScale ^(2.7.8) | when type is card, scaled size of secondary cards | ^[number] | 0.83 |
| loop | display the items in loop | ^[boolean] | true |
| direction | display direction | ^[enum]`'horizontal' \| 'vertical'` | horizontal |
| pause-on-hover | pause autoplay when hover | ^[boolean] | true |
@ -108,11 +109,11 @@ carousel/vertical
### Carousel Exposes
| Method | Description | Type |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| Method | Description | Type |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| setActiveItem | manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` | ^[Function]`(index: string \| number) => void` |
| prev | switch to the previous slide | ^[Function]`() => void` |
| next | switch to the next slide | ^[Function]`() => void` |
| prev | switch to the previous slide | ^[Function]`() => void` |
| next | switch to the next slide | ^[Function]`() => void` |
## Carousel-Item API

3
packages/components/carousel/__tests__/carousel.test.tsx
View File

@ -147,6 +147,7 @@ describe('Carousel', () => {
{
autoplay: false,
type: 'card',
cardScale: 0.6,
},
7
)
@ -159,6 +160,8 @@ describe('Carousel', () => {
expect(items[6].classList.contains('is-in-stage')).toBeTruthy()
await items[1].click()
await wait()
expect(items[0].getAttribute('style')).toContain('scale(0.6)')
expect(items[1].getAttribute('style')).toContain('scale(1)')
expect(items[1].classList.contains('is-active')).toBeTruthy()
await wrapper.vm.$el.querySelector('.el-carousel__arrow--left').click()
await wait()

7
packages/components/carousel/src/carousel.ts
View File

@ -62,6 +62,13 @@ export const carouselProps = buildProps({
values: ['', 'card'],
default: '',
},
/**
* @description when type is card, scaled size of secondary cards
*/
cardScale: {
type: Number,
default: 0.83,
},
/**
* @description display the items in loop
*/

1
packages/components/carousel/src/constants.ts
View File

@ -25,6 +25,7 @@ export type CarouselContext = {
isCardType: Ref<boolean>
isVertical: Ref<boolean>
loop: boolean
cardScale: number
addItem: (item: CarouselItemContext) => void
removeItem: (uid: number) => void
setActiveItem: (index: number) => void

12
packages/components/carousel/src/use-carousel-item.ts
View File

@ -33,8 +33,6 @@ export const useCarouselItem = (
)
}
const CARD_SCALE = 0.83
const carouselItemRef = ref<HTMLElement>()
const hover = ref(false)
const translate = ref(0)
@ -45,7 +43,7 @@ export const useCarouselItem = (
const animating = ref(false)
// computed
const { isCardType, isVertical } = carouselContext
const { isCardType, isVertical, cardScale } = carouselContext
// methods
@ -73,11 +71,11 @@ export const useCarouselItem = (
: carouselContext.root.value?.offsetWidth || 0
if (inStage.value) {
return (parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1)) / 4
return (parentWidth * ((2 - cardScale) * (index - activeIndex) + 1)) / 4
} else if (index < activeIndex) {
return (-(1 + CARD_SCALE) * parentWidth) / 4
return (-(1 + cardScale) * parentWidth) / 4
} else {
return ((3 + CARD_SCALE) * parentWidth) / 4
return ((3 + cardScale) * parentWidth) / 4
}
}
@ -117,7 +115,7 @@ export const useCarouselItem = (
if (_isCardType) {
inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1
translate.value = calcCardTranslate(index, activeIndex)
scale.value = unref(active) ? 1 : CARD_SCALE
scale.value = unref(active) ? 1 : cardScale
} else {
translate.value = calcTranslate(index, activeIndex, _isVertical)
}

1
packages/components/carousel/src/use-carousel.ts
View File

@ -332,6 +332,7 @@ export const useCarousel = (
isVertical,
items,
loop: props.loop,
cardScale: props.cardScale,
addItem,
removeItem,
setActiveItem,