fix(components): [carousel] special case activeIndex is inaccurate (#21736)

* fix: done

* chore: update

* chore: update

* chore: foramt

---------

Co-authored-by: chenwenjie <chenwenjie@zujibao.net>
Co-authored-by: warmthsea <2586244885@qq.com>

packages/components/carousel/__tests__/carousel.test.tsx

@@ -380,4 +380,35 @@ describe('Carousel', () => {
     vm.$refs.carousel.next()
     expect(vm.$refs.carousel.activeIndex).toBe(3)
   })
+
+  it('two item, activeIndex is not a supplementary item', async () => {
+    const data = [100, 200]
+
+    wrapper = mount({
+      setup() {
+        return () => (
+          <div>
+            <Carousel ref={'carousel'}>
+              {data.map((value) => (
+                <CarouselItem label={value} key={value}>
+                  {value}
+                </CarouselItem>
+              ))}
+            </Carousel>
+          </div>
+        )
+      },
+    })
+
+    await nextTick()
+    const vm = wrapper.vm
+
+    expect(vm.$refs.carousel.activeIndex).toBe(0)
+    vm.$refs.carousel.next()
+    expect(vm.$refs.carousel.activeIndex).toBe(1)
+    vm.$refs.carousel.next()
+    expect(vm.$refs.carousel.activeIndex).toBe(0)
+    vm.$refs.carousel.prev()
+    expect(vm.$refs.carousel.activeIndex).toBe(1)
+  })
 })

packages/components/carousel/src/carousel.vue

@@ -108,6 +108,7 @@ const emit = defineEmits(carouselEmits)
 const {
   root,
   activeIndex,
+  exposeActiveIndex,
   arrowDisplay,
   hasLabel,
   hover,
@@ -175,7 +176,7 @@ function handleTransitionEnd(e: TransitionEvent) {
 
 defineExpose({
   /** @description active slide index */
-  activeIndex,
+  activeIndex: exposeActiveIndex,
   /** @description manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` */
   setActiveItem,
   /** @description switch to the previous slide */

packages/components/carousel/src/use-carousel.ts

@@ -255,6 +255,14 @@ export const useCarousel = (
       }
     }
   )
+
+  const exposeActiveIndex = computed({
+    get: () => {
+      return isItemsTwoLength.value ? activeIndex.value % 2 : activeIndex.value
+    },
+    set: (value) => (activeIndex.value = value),
+  })
+
   watch(
     () => props.autoplay,
     (autoplay) => {
@@ -316,6 +324,7 @@ export const useCarousel = (
   return {
     root,
     activeIndex,
+    exposeActiveIndex,
     arrowDisplay,
     hasLabel,
     hover,