feat(carousel): add pause-on-hover prop (#1423)

* feat(carousel): add pause-on-hover prop

* feat: add jest

packages/carousel/__tests__/carousel.spec.ts

@@ -197,4 +197,21 @@ describe('Carousel', () => {
     expect(wrapper.vm.$refs.carousel.direction).toBe('vertical')
     expect(items[0].style.transform.indexOf('translateY') !== -1).toBeTruthy()
   })
+
+  it('pause auto play on hover', async done => {
+    const wrapper = _mount(`
+        <div>
+          <el-carousel :interval="50" :pause-on-hover="false">
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
+          </el-carousel>
+        </div>
+      `)
+
+    await nextTick()
+    await wrapper.find('.el-carousel').trigger('mouseenter')
+    const items = wrapper.vm.$el.querySelectorAll('.el-carousel__item')
+    await wait(60)
+    expect(items[1].classList.contains('is-active')).toBeTruthy()
+    done()
+  })
 })

packages/carousel/src/carousel.ts

@@ -28,9 +28,11 @@ export interface ICarouselProps {
   type: string
   loop: boolean
   direction: string
+  pauseOnHover: boolean
 }
 
 export type UnionCarouselItemData = ICarouselItemProps & ToRefs<ICarouselItemData>
+
 export interface CarouselItem extends UnionCarouselItemData {
   uid: number
   translateItem: (index: number, activeIndex: number, oldIndex: number) => void

packages/carousel/src/main.vue

@@ -118,6 +118,10 @@ export default defineComponent({
         return ['horizontal', 'vertical'].includes(val)
       },
     },
+    pauseOnHover: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['change'],
   setup(props: ICarouselProps, { emit }) {
@@ -270,7 +274,9 @@ export default defineComponent({
 
     function handleMouseEnter() {
       data.hover = true
-      pauseTimer()
+      if (props.pauseOnHover) {
+        pauseTimer()
+      }
     }
 
     function handleMouseLeave() {

website/docs/en-US/carousel.md

@@ -167,11 +167,11 @@ By default, `direction` is `horizontal`. Let carousel be displayed in the vertic
     line-height: 200px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -192,6 +192,7 @@ By default, `direction` is `horizontal`. Let carousel be displayed in the vertic
 | type | type of the Carousel | string | card | — |
 | loop | display the items in loop | boolean | - | true |
 | direction | display direction | string | horizontal/vertical | horizontal |
+| pause-on-hover | pause autoplay when hover | boolean | - | true |
 
 ### Carousel Events
 | Event Name | Description | Parameters |

website/docs/es/carousel.md

@@ -171,11 +171,11 @@ Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de form
     line-height: 200px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -196,6 +196,7 @@ Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de form
 | type               | Tipo de carrusel                                   | string  | card                | —           |
 | loop               | Si se muestra cíclicamente                         | boolean | —                   | true        |
 | direction          | direccion en la que se muestra el contenido        | string  | horizontal/vertical | horizontal  |
+| pause-on-hover | pause autoplay when hover | boolean | - | true |
 
 ### Eventos de Carousel
 | Nombre evento | Descripción                               | Parámetros                                                   |

website/docs/fr-FR/carousel.md

@@ -192,6 +192,7 @@ Par défaut, `direction` est `horizontal`. Vous pouvez faire en sorte que le dé
 | type | Type du carrousel. | string | card | — |
 | loop | Affiche les éléments en boucle. | boolean | - | true |
 | direction | Détermine la direction du défilement. | string | horizontal/vertical | horizontal |
+| pause-on-hover | pause autoplay when hover | boolean | - | true |
 
 ### Évènements du Carrousel
 | Nom | Description | Paramètres |

website/docs/jp/carousel.md

@@ -167,11 +167,11 @@
     line-height: 200px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -192,6 +192,7 @@
 | type | carouselのタイプ | string | card | — |
 | loop | ループ表示 | boolean | - | true |
 | direction | 表示方向 | string | horizontal/vertical | horizontal |
+| pause-on-hover | pause autoplay when hover | boolean | - | true |
 
 ### carouselイベント
 | Event Name | Description | Parameters |

website/docs/zh-CN/carousel.md

@@ -39,7 +39,7 @@
   .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
   }
@@ -69,11 +69,11 @@
     line-height: 300px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -102,11 +102,11 @@
     line-height: 300px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -135,11 +135,11 @@
     line-height: 200px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -167,11 +167,11 @@
     line-height: 200px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -192,6 +192,7 @@
 | type | 走马灯的类型 | string | card | — |
 | loop | 是否循环显示 | boolean | - | true |
 | direction | 走马灯展示的方向 | string | horizontal/vertical | horizontal |
+| pause-on-hover | 鼠标悬浮时暂停自动切换 | boolean | - | true |
 
 ### Carousel Events
 | 事件名称 | 说明 | 回调参数 |