From a11a7d09dc53ab15dc8580a80cc49ddcf0ee58db Mon Sep 17 00:00:00 2001 From: sea <45450994+warmthsea@users.noreply.github.com> Date: Thu, 25 Jul 2024 14:31:37 +0800 Subject: [PATCH] feat(components): [carousel] add cardScale prop (#17621) * feat: add params * docs: add content * perf: code * ci: again test --- docs/en-US/component/carousel.md | 9 +++++---- .../components/carousel/__tests__/carousel.test.tsx | 3 +++ packages/components/carousel/src/carousel.ts | 7 +++++++ packages/components/carousel/src/constants.ts | 1 + .../components/carousel/src/use-carousel-item.ts | 12 +++++------- packages/components/carousel/src/use-carousel.ts | 1 + 6 files changed, 22 insertions(+), 11 deletions(-) diff --git a/docs/en-US/component/carousel.md b/docs/en-US/component/carousel.md index a809d24f34..5fe455d7f5 100644 --- a/docs/en-US/component/carousel.md +++ b/docs/en-US/component/carousel.md @@ -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 diff --git a/packages/components/carousel/__tests__/carousel.test.tsx b/packages/components/carousel/__tests__/carousel.test.tsx index f053636bc1..02ba376c01 100644 --- a/packages/components/carousel/__tests__/carousel.test.tsx +++ b/packages/components/carousel/__tests__/carousel.test.tsx @@ -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() diff --git a/packages/components/carousel/src/carousel.ts b/packages/components/carousel/src/carousel.ts index 3c400d2dd8..a338ea0950 100644 --- a/packages/components/carousel/src/carousel.ts +++ b/packages/components/carousel/src/carousel.ts @@ -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 */ diff --git a/packages/components/carousel/src/constants.ts b/packages/components/carousel/src/constants.ts index 0e76e99e2a..3d93a46180 100644 --- a/packages/components/carousel/src/constants.ts +++ b/packages/components/carousel/src/constants.ts @@ -25,6 +25,7 @@ export type CarouselContext = { isCardType: Ref isVertical: Ref loop: boolean + cardScale: number addItem: (item: CarouselItemContext) => void removeItem: (uid: number) => void setActiveItem: (index: number) => void diff --git a/packages/components/carousel/src/use-carousel-item.ts b/packages/components/carousel/src/use-carousel-item.ts index df202e9b3c..c3aa87963f 100644 --- a/packages/components/carousel/src/use-carousel-item.ts +++ b/packages/components/carousel/src/use-carousel-item.ts @@ -33,8 +33,6 @@ export const useCarouselItem = ( ) } - const CARD_SCALE = 0.83 - const carouselItemRef = ref() 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) } diff --git a/packages/components/carousel/src/use-carousel.ts b/packages/components/carousel/src/use-carousel.ts index 1045e21f47..8212c1fbb1 100644 --- a/packages/components/carousel/src/use-carousel.ts +++ b/packages/components/carousel/src/use-carousel.ts @@ -332,6 +332,7 @@ export const useCarousel = ( isVertical, items, loop: props.loop, + cardScale: props.cardScale, addItem, removeItem, setActiveItem,