diff --git a/packages/components/carousel/src/Carousel.tsx b/packages/components/carousel/src/Carousel.tsx index eee9003cb..f300a0ea6 100644 --- a/packages/components/carousel/src/Carousel.tsx +++ b/packages/components/carousel/src/Carousel.tsx @@ -46,7 +46,9 @@ export default defineComponent({ } } - onBeforeUpdate(() => (sliderRefs.value = [])) + onBeforeUpdate(() => { + sliderRefs.value = [] + }) const { activeIndex, runningIndex, unitHeight, unitWidth, goTo, next, prev } = useStrategy( props, @@ -119,7 +121,8 @@ export default defineComponent({ } const onTransitionend = () => { - if (runningIndex.value === -1) { + const currRunningIndex = runningIndex.value + if (currRunningIndex === -1) { return } const sliderTrackElement = sliderTrackRef.value! @@ -131,13 +134,13 @@ export default defineComponent({ element.style.left = '' } }) - const currIndex = runningIndex.value + if (mergedVertical.value) { - sliderTrackElement.style.transform = `translate3d(0, ${-currIndex * unitHeight.value}px, 0)` + sliderTrackElement.style.transform = `translate3d(0, ${-currRunningIndex * unitHeight.value}px, 0)` } else { - sliderTrackElement.style.transform = `translate3d(${-currIndex * unitWidth.value}px,0 , 0)` + sliderTrackElement.style.transform = `translate3d(${-currRunningIndex * unitWidth.value}px,0 , 0)` } - activeIndex.value = currIndex + activeIndex.value = currRunningIndex runningIndex.value = -1 startAutoplay() } diff --git a/packages/components/carousel/src/composables/useStrategy.ts b/packages/components/carousel/src/composables/useStrategy.ts index 51798c47c..8574f1439 100644 --- a/packages/components/carousel/src/composables/useStrategy.ts +++ b/packages/components/carousel/src/composables/useStrategy.ts @@ -64,10 +64,15 @@ export function useStrategy( // this will not track dependencies used in the slot. // Invoke the slot function inside the render function instead. onMounted(() => { - watch(mergedLength, () => { - goTo(0) - layout() - }) + watch( + mergedLength, + () => { + layout() + runningIndex.value = -1 + goTo(0) + }, + { flush: 'post' }, + ) }) const goTo = (nextIndex: number) => { @@ -75,43 +80,48 @@ export function useStrategy( const sliderTrackElement = sliderTrackRef.value const firstSliderElement = convertElement(sliderRefs.value[0]) const lastSliderElement = convertElement(sliderRefs.value[length - 1]) - if (!sliderTrackElement || !firstSliderElement || !lastSliderElement) { + + if ( + length <= 1 || + runningIndex.value !== -1 || + nextIndex === activeIndex.value || + !sliderTrackElement || + !firstSliderElement || + !lastSliderElement + ) { return } - if (length > 1 && runningIndex.value === -1) { - const currIndex = activeIndex.value - const { from, to } = getBoundary(currIndex, nextIndex, length) - runningIndex.value = to - sliderTrackElement.style.transition = `transform 0.5s ease` - - const needToAdjust = length > 2 && nextIndex !== to - if (mergedVertical.value) { - if (needToAdjust) { - if (to < from) { - firstSliderElement.style.top = `${length * unitHeight.value}px` - lastSliderElement.style.top = '' - } else { - firstSliderElement.style.top = '' - lastSliderElement.style.top = `${-length * unitHeight.value}px` - } - sliderTrackElement.style.transform = `translate3d(0, ${-nextIndex * unitHeight.value}px, 0)` + const { from, to } = getBoundary(activeIndex.value, nextIndex, length) + runningIndex.value = to + sliderTrackElement.style.transition = `transform 0.5s ease` + + const needToAdjust = length > 2 && nextIndex !== to + if (mergedVertical.value) { + if (needToAdjust) { + if (to < from) { + firstSliderElement.style.top = `${length * unitHeight.value}px` + lastSliderElement.style.top = '' } else { - sliderTrackElement.style.transform = `translate3d(0, ${-to * unitHeight.value}px, 0)` + firstSliderElement.style.top = '' + lastSliderElement.style.top = `${-length * unitHeight.value}px` } + sliderTrackElement.style.transform = `translate3d(0, ${-nextIndex * unitHeight.value}px, 0)` } else { - if (needToAdjust) { - if (to < from) { - firstSliderElement.style.left = `${length * unitWidth.value}px` - lastSliderElement.style.left = '' - } else { - firstSliderElement.style.left = '' - lastSliderElement.style.left = `${-length * unitWidth.value}px` - } - sliderTrackElement.style.transform = `translate3d(${-nextIndex * unitWidth.value}px, 0, 0)` + sliderTrackElement.style.transform = `translate3d(0, ${-to * unitHeight.value}px, 0)` + } + } else { + if (needToAdjust) { + if (to < from) { + firstSliderElement.style.left = `${length * unitWidth.value}px` + lastSliderElement.style.left = '' } else { - sliderTrackElement.style.transform = `translate3d(${-to * unitWidth.value}px, 0, 0)` + firstSliderElement.style.left = '' + lastSliderElement.style.left = `${-length * unitWidth.value}px` } + sliderTrackElement.style.transform = `translate3d(${-nextIndex * unitWidth.value}px, 0, 0)` + } else { + sliderTrackElement.style.transform = `translate3d(${-to * unitWidth.value}px, 0, 0)` } } } diff --git a/packages/components/pagination/style/index.less b/packages/components/pagination/style/index.less index bc5674f48..370d7fa26 100644 --- a/packages/components/pagination/style/index.less +++ b/packages/components/pagination/style/index.less @@ -16,11 +16,12 @@ &-sizes { display: inline-flex; - min-width: 104px; + &-select-wrapper { flex: auto; margin: 0 4px; + min-width: 64px; } }