From 0b2f6911a920d7fe022e2363d95d403f4e983fde Mon Sep 17 00:00:00 2001
From: sea <45450994+warmthsea@users.noreply.github.com>
Date: Fri, 26 Jul 2024 10:20:25 +0800
Subject: [PATCH] feat(components): [carousel] export `activeIndex` (#17650)

Co-authored-by: qiang <qw13131wang@gmail.com>
---
 docs/en-US/component/carousel.md              | 11 ++++---
 .../carousel/__tests__/carousel.test.tsx      | 31 +++++++++++++++++++
 packages/components/carousel/src/carousel.vue |  2 ++
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/docs/en-US/component/carousel.md b/docs/en-US/component/carousel.md
index 5fe455d7f5..85a788bfce 100644
--- a/docs/en-US/component/carousel.md
+++ b/docs/en-US/component/carousel.md
@@ -109,11 +109,12 @@ carousel/vertical
 
 ### Carousel Exposes
 
-| 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`                        |
+| Method               | Description                                                                                                                     | Type                                           |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| activeIndex ^(2.7.8) | active slide index                                                                                                              | ^[number]                                      |
+| 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`                        |
 
 ## Carousel-Item API
 
diff --git a/packages/components/carousel/__tests__/carousel.test.tsx b/packages/components/carousel/__tests__/carousel.test.tsx
index 02ba376c01..3e692daf9b 100644
--- a/packages/components/carousel/__tests__/carousel.test.tsx
+++ b/packages/components/carousel/__tests__/carousel.test.tsx
@@ -343,4 +343,35 @@ describe('Carousel', () => {
     expect(items[0].classList.contains('is-active')).toBeTruthy()
     expect(container.style.height).toBe('100px')
   })
+
+  it('exposes', async () => {
+    const data = [100, 200, 300, 500]
+
+    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.setActiveItem(3)
+    expect(vm.$refs.carousel.activeIndex).toBe(3)
+    vm.$refs.carousel.prev()
+    expect(vm.$refs.carousel.activeIndex).toBe(2)
+    vm.$refs.carousel.next()
+    expect(vm.$refs.carousel.activeIndex).toBe(3)
+  })
 })
diff --git a/packages/components/carousel/src/carousel.vue b/packages/components/carousel/src/carousel.vue
index f7e53fcb32..7edd450a1d 100644
--- a/packages/components/carousel/src/carousel.vue
+++ b/packages/components/carousel/src/carousel.vue
@@ -166,6 +166,8 @@ const indicatorsClasses = computed(() => {
 })
 
 defineExpose({
+  /** @description active slide index */
+  activeIndex,
   /** @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 */