From 67ea05eb2cc19a0aeb3b3b6e7192ccd8bf5a2ce1 Mon Sep 17 00:00:00 2001 From: kooriookami <38392315+kooriookami@users.noreply.github.com> Date: Mon, 8 Feb 2021 16:23:48 +0800 Subject: [PATCH] feat(carousel): add pause-on-hover prop (#1423) * feat(carousel): add pause-on-hover prop * feat: add jest --- packages/carousel/__tests__/carousel.spec.ts | 17 +++++++++++++++++ packages/carousel/src/carousel.ts | 2 ++ packages/carousel/src/main.vue | 8 +++++++- website/docs/en-US/carousel.md | 5 +++-- website/docs/es/carousel.md | 5 +++-- website/docs/fr-FR/carousel.md | 1 + website/docs/jp/carousel.md | 5 +++-- website/docs/zh-CN/carousel.md | 19 ++++++++++--------- 8 files changed, 46 insertions(+), 16 deletions(-) diff --git a/packages/carousel/__tests__/carousel.spec.ts b/packages/carousel/__tests__/carousel.spec.ts index 7ab1df8776..ca0ac2e41e 100644 --- a/packages/carousel/__tests__/carousel.spec.ts +++ b/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(` +
+ + + +
+ `) + + 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() + }) }) diff --git a/packages/carousel/src/carousel.ts b/packages/carousel/src/carousel.ts index 4e5a145071..8f1f653077 100644 --- a/packages/carousel/src/carousel.ts +++ b/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 + export interface CarouselItem extends UnionCarouselItemData { uid: number translateItem: (index: number, activeIndex: number, oldIndex: number) => void diff --git a/packages/carousel/src/main.vue b/packages/carousel/src/main.vue index e0b6a7f476..fe90897bfc 100644 --- a/packages/carousel/src/main.vue +++ b/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() { diff --git a/website/docs/en-US/carousel.md b/website/docs/en-US/carousel.md index 36ed9f9805..ce30c73b2f 100644 --- a/website/docs/en-US/carousel.md +++ b/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 | diff --git a/website/docs/es/carousel.md b/website/docs/es/carousel.md index 163ec447d9..988e4fc743 100644 --- a/website/docs/es/carousel.md +++ b/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 | diff --git a/website/docs/fr-FR/carousel.md b/website/docs/fr-FR/carousel.md index defa9e1e5b..f35640e898 100644 --- a/website/docs/fr-FR/carousel.md +++ b/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 | diff --git a/website/docs/jp/carousel.md b/website/docs/jp/carousel.md index 5aee8eb22f..100c7eb657 100644 --- a/website/docs/jp/carousel.md +++ b/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 | diff --git a/website/docs/zh-CN/carousel.md b/website/docs/zh-CN/carousel.md index 030926da35..38a4c97c14 100644 --- a/website/docs/zh-CN/carousel.md +++ b/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 | 事件名称 | 说明 | 回调参数 |