fix(components): [carousel] avoid stopping autoplay after children change (#23494)

* fix(components): [carousel] Carousel stops autoplay

* test(components): [carousel] add test cases

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

Co-authored-by: rzzf <cszhjh@gmail.com>

---------

Co-authored-by: keeplearning66 <1256734885@qq.com>
Co-authored-by: rzzf <cszhjh@gmail.com>

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

@@ -411,4 +411,41 @@ describe('Carousel', () => {
     vm.$refs.carousel.prev()
     expect(vm.$refs.carousel.activeIndex).toBe(1)
   })
+
+  it('should continue auto play after adding new items dynamically', async () => {
+    const data = reactive([1, 2, 3])
+
+    wrapper = mount({
+      setup() {
+        return () => (
+          <div>
+            <Carousel interval={30} 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)
+
+    await wait(40)
+    expect(vm.$refs.carousel.activeIndex).toBe(1)
+
+    data.push(4)
+    await nextTick()
+
+    expect(wrapper.findAll('.el-carousel__item').length).toBe(4)
+    expect(vm.$refs.carousel.activeIndex).toBe(0)
+
+    await wait(80)
+    expect(vm.$refs.carousel.activeIndex).toBe(2)
+  })
 })

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

@@ -214,7 +214,7 @@ export const useCarousel = (
 
   function resetTimer() {
     pauseTimer()
-    if (!props.pauseOnHover) startTimer()
+    if (!props.pauseOnHover || !hover.value) startTimer()
   }
 
   function setContainerHeight(height: number) {