-
Notifications
You must be signed in to change notification settings - Fork 138
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp:carousel): add carousel component
- Loading branch information
1 parent
4e446fc
commit ef791ec
Showing
30 changed files
with
860 additions
and
0 deletions.
There are no files selected for viewing
25 changes: 25 additions & 0 deletions
25
packages/components/carousel/__tests__/__snapshots__/carousel.spec.ts.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Carousel render work 1`] = ` | ||
"<div class=\\"ix-carousel ix-carousel-horizontal\\" style=\\"height: 0px;\\"> | ||
<div class=\\"ix-carousel-slides\\" style=\\"width: 0px; left: -0px;\\"> | ||
<div class=\\"ix-carousel-slide-item\\" style=\\"width: 0px; height: 100%;\\"> | ||
<div>card2</div> | ||
</div> | ||
<div class=\\"ix-carousel-slide-item\\" style=\\"width: 0px; height: 100%;\\"> | ||
<div>card1</div> | ||
</div> | ||
<div class=\\"ix-carousel-slide-item\\" style=\\"width: 0px; height: 100%;\\"> | ||
<div>card2</div> | ||
</div> | ||
<div class=\\"ix-carousel-slide-item\\" style=\\"width: 0px; height: 100%;\\"> | ||
<div>card1</div> | ||
</div> | ||
</div> | ||
<!----> | ||
<ul class=\\"ix-carousel-dot ix-carousel-dot-bottom\\"> | ||
<li class=\\"ix-carousel-dot-item ix-carousel-dot-item-active\\"><button class=\\"ix-carousel-dot-item-default\\"></button></li> | ||
<li class=\\"ix-carousel-dot-item\\"><button class=\\"ix-carousel-dot-item-default\\"></button></li> | ||
</ul> | ||
</div>" | ||
`; |
116 changes: 116 additions & 0 deletions
116
packages/components/carousel/__tests__/carousel.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,116 @@ | ||
import { MountingOptions, mount } from '@vue/test-utils' | ||
import { h } from 'vue' | ||
|
||
import { renderWork } from '@tests' | ||
|
||
import Carousel from '../src/Carousel' | ||
import { CarouselProps } from '../src/types' | ||
|
||
describe('Carousel', () => { | ||
const sleep = (ms = 1000) => new Promise<void>(resolve => setTimeout(() => resolve(), ms)) | ||
const CarouselMount = (options?: MountingOptions<Partial<CarouselProps>>) => | ||
mount(Carousel, { | ||
slots: { | ||
default: () => [h('div', 'card1'), h('div', 'card2'), h('div', 'card3')], | ||
}, | ||
...(options as MountingOptions<CarouselProps>), | ||
}) | ||
|
||
renderWork<CarouselProps>(Carousel, { | ||
props: { | ||
autoplayTime: 100, | ||
}, | ||
slots: { | ||
default: () => [h('div', 'card1'), h('div', 'card2')], | ||
}, | ||
}) | ||
|
||
test('prop showArrow work', async () => { | ||
const onChange = jest.fn() | ||
const wrapper = CarouselMount({ props: { showArrow: true, onChange } }) | ||
|
||
expect(wrapper.findAll('.ix-carousel-arrow').length).toBe(2) | ||
|
||
await wrapper.find('.ix-carousel-arrow-next').trigger('click') | ||
await wrapper.find('.ix-carousel-slides').trigger('transitionend') | ||
expect(onChange).toHaveBeenCalledTimes(1) | ||
|
||
await wrapper.find('.ix-carousel-arrow-prev').trigger('click') | ||
await wrapper.find('.ix-carousel-slides').trigger('transitionend') | ||
expect(onChange).toHaveBeenCalledTimes(2) | ||
|
||
await wrapper.setProps({ showArrow: false }) | ||
expect(wrapper.find('.ix-carousel-arrow').exists()).toBeFalsy() | ||
}) | ||
|
||
test('prop dotPlacement work', async () => { | ||
const wrapper = CarouselMount({ props: { dotPlacement: 'none' } }) | ||
|
||
expect(wrapper.find('.ix-carousel-dot').exists()).toBeFalsy() | ||
|
||
const placements = ['bottom', 'top', 'start', 'end'] | ||
for (const placement of placements) { | ||
await wrapper.setProps({ dotPlacement: placement }) | ||
expect(wrapper.find('.ix-carousel-dot').classes()).toContain(`ix-carousel-dot-${placement}`) | ||
|
||
if (['bottom', 'top'].includes(placement)) { | ||
expect(wrapper.find('.ix-carousel').classes()).toContain('ix-carousel-horizontal') | ||
} else { | ||
expect(wrapper.find('.ix-carousel').classes()).toContain('ix-carousel-vertical') | ||
} | ||
} | ||
}) | ||
|
||
test('prop autoplayTime work', async () => { | ||
const wrapper = CarouselMount({ props: { autoplayTime: 100 } }) | ||
|
||
expect(wrapper.findAll('.ix-carousel-dot-item')[0].classes()).toContain('ix-carousel-dot-item-active') | ||
|
||
await sleep(100) | ||
expect(wrapper.findAll('.ix-carousel-dot-item')[0].classes()).not.toContain('ix-carousel-dot-item-active') | ||
expect(wrapper.findAll('.ix-carousel-dot-item')[1].classes()).toContain('ix-carousel-dot-item-active') | ||
|
||
await wrapper.setProps({ autoplayTime: 0 }) | ||
await sleep(100) | ||
expect(wrapper.findAll('.ix-carousel-dot-item')[1].classes()).toContain('ix-carousel-dot-item-active') | ||
}) | ||
|
||
test('prop trigger work', async () => { | ||
const onChange = jest.fn() | ||
const wrapper = CarouselMount({ props: { onChange } }) | ||
|
||
await wrapper.findAll('.ix-carousel-dot-item')[2].trigger('click') | ||
await wrapper.find('.ix-carousel-slides').trigger('transitionend') | ||
expect(wrapper.findAll('.ix-carousel-dot-item')[2].classes()).toContain('ix-carousel-dot-item-active') | ||
expect(onChange).toHaveBeenCalledTimes(1) | ||
|
||
await wrapper.setProps({ | ||
trigger: 'hover', | ||
}) | ||
await wrapper.find('.ix-carousel-dot-item').trigger('mouseenter') | ||
await wrapper.find('.ix-carousel-slides').trigger('transitionend') | ||
expect(wrapper.find('.ix-carousel-dot-item').classes()).toContain('ix-carousel-dot-item-active') | ||
expect(onChange).toHaveBeenCalledTimes(2) | ||
|
||
await wrapper.findAll('.ix-carousel-dot-item')[1].trigger('mouseenter') | ||
await wrapper.find('.ix-carousel-slides').trigger('transitionend') | ||
expect(wrapper.findAll('.ix-carousel-dot-item')[1].classes()).toContain('ix-carousel-dot-item-active') | ||
expect(onChange).toHaveBeenCalledTimes(3) | ||
}) | ||
|
||
test('prop onChange work', async () => { | ||
const onChange = jest.fn() | ||
const wrapper = CarouselMount({ | ||
props: { onChange, showArrow: true }, | ||
slots: { | ||
default: () => [h('div', 'card1')], | ||
}, | ||
}) | ||
|
||
await wrapper.find('.ix-carousel-arrow-prev').trigger('click') | ||
expect(onChange).toHaveBeenCalledTimes(0) | ||
|
||
await wrapper.find('.ix-carousel-arrow-next').trigger('click') | ||
expect(onChange).toHaveBeenCalledTimes(0) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
--- | ||
title: | ||
zh: 箭头 | ||
order: 3 | ||
--- | ||
|
||
## zh | ||
|
||
支持自定义箭头展示 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<template> | ||
<IxCarousel :showArrow="true"> | ||
<div class="card-item">远看泰山黑糊糊</div> | ||
<div class="card-item">上头细来下头粗</div> | ||
<div class="card-item">如把泰山倒过来</div> | ||
<div class="card-item">下头细来上头粗</div> | ||
</IxCarousel> | ||
<IxCarousel :showArrow="true" style="margin-top: 16px"> | ||
<div class="card-item">遥远的泰山,展现出阴暗的身影</div> | ||
<div class="card-item">厚重的基础,支撑起浅薄的高层</div> | ||
<div class="card-item">假如某一天,有人将那乾坤颠倒</div> | ||
<div class="card-item">陈旧的传统,必将遭逢地裂山崩</div> | ||
<template #arrow="{ type }"> | ||
<IxIcon v-if="type === 'prev'" name="left"></IxIcon> | ||
<IxIcon v-else name="right"></IxIcon> | ||
</template> | ||
</IxCarousel> | ||
</template> | ||
|
||
<style lang="less" scoped> | ||
.card-item { | ||
height: 160px; | ||
line-height: 160px; | ||
background-color: #364d79; | ||
text-align: center; | ||
font-size: 16px; | ||
color: #fff; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
--- | ||
title: | ||
zh: 自动轮播 | ||
order: 2 | ||
--- | ||
|
||
## zh | ||
|
||
定时切换下一张。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<template> | ||
<IxCarousel :autoplayTime="2000"> | ||
<div class="card-item">遥远的泰山,展现出阴暗的身影</div> | ||
<div class="card-item">厚重的基础,支撑起浅薄的高层</div> | ||
<div class="card-item">假如某一天,有人将那乾坤颠倒</div> | ||
<div class="card-item">陈旧的传统,必将遭逢地裂山崩</div> | ||
</IxCarousel> | ||
</template> | ||
|
||
<style lang="less" scoped> | ||
.card-item { | ||
height: 160px; | ||
line-height: 160px; | ||
background-color: #364d79; | ||
text-align: center; | ||
font-size: 16px; | ||
color: #fff; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
--- | ||
title: | ||
zh: 基本使用 | ||
en: Basic usage | ||
order: 0 | ||
--- | ||
|
||
## zh | ||
|
||
最简单的用法。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<template> | ||
<IxCarousel> | ||
<div class="card-item">远看泰山黑糊糊</div> | ||
<div class="card-item">上头细来下头粗</div> | ||
<div class="card-item">如把泰山倒过来</div> | ||
<div class="card-item">下头细来上头粗</div> | ||
</IxCarousel> | ||
</template> | ||
|
||
<style lang="less" scoped> | ||
.card-item { | ||
height: 160px; | ||
line-height: 160px; | ||
background-color: #364d79; | ||
text-align: center; | ||
font-size: 16px; | ||
color: #fff; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
--- | ||
title: | ||
zh: 面板指示点 | ||
order: 5 | ||
--- | ||
|
||
## zh | ||
|
||
支持自定义面板指示点 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
<template> | ||
<IxCarousel ref="carouselRef"> | ||
<div v-for="item in list" :key="item" class="card-item">{{ item }}</div> | ||
<template #dot> | ||
<div class="custom-dot"></div> | ||
</template> | ||
</IxCarousel> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
const list = [ | ||
'遥远的泰山,展现出阴暗的身影', | ||
'厚重的基础,支撑起浅薄的高层', | ||
'假如某一天,有人将那乾坤颠倒', | ||
'陈旧的传统,必将遭逢地裂山崩', | ||
] | ||
</script> | ||
|
||
<style lang="less" scoped> | ||
.card-item { | ||
height: 160px; | ||
line-height: 160px; | ||
background-color: #364d79; | ||
text-align: center; | ||
font-size: 16px; | ||
color: #fff; | ||
} | ||
.custom-dot { | ||
width: 16px; | ||
height: 3px; | ||
background-color: #fff; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
--- | ||
title: | ||
zh: 面板指示点 | ||
order: 1 | ||
--- | ||
|
||
## zh | ||
|
||
面板指示点的位置有4个方向。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<template> | ||
<IxRadioGroup v-model:value="value" buttoned> | ||
<IxRadio value="top">top</IxRadio> | ||
<IxRadio value="bottom">bottom</IxRadio> | ||
<IxRadio value="start">start</IxRadio> | ||
<IxRadio value="end">end</IxRadio> | ||
<IxRadio value="none">none</IxRadio> | ||
</IxRadioGroup> | ||
<IxCarousel :dotPlacement="value"> | ||
<div class="card-item">1</div> | ||
<div class="card-item">2</div> | ||
<div class="card-item">3</div> | ||
<div class="card-item">4</div> | ||
</IxCarousel> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { ref } from 'vue' | ||
const value = ref('start') | ||
</script> | ||
|
||
<style lang="less" scoped> | ||
.card-item { | ||
height: 160px; | ||
line-height: 160px; | ||
background-color: #364d79; | ||
text-align: center; | ||
font-size: 24px; | ||
color: #fff; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
--- | ||
title: | ||
zh: 指示点触发方式 | ||
order: 4 | ||
--- | ||
|
||
## zh | ||
|
||
支持设置鼠标经过指示点时触发切换 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<template> | ||
<IxCarousel trigger="hover"> | ||
<div class="card-item">遥远的泰山,展现出阴暗的身影</div> | ||
<div class="card-item">厚重的基础,支撑起浅薄的高层</div> | ||
<div class="card-item">假如某一天,有人将那乾坤颠倒</div> | ||
<div class="card-item">陈旧的传统,必将遭逢地裂山崩</div> | ||
</IxCarousel> | ||
</template> | ||
|
||
<style lang="less" scoped> | ||
.card-item { | ||
height: 160px; | ||
line-height: 160px; | ||
background-color: #364d79; | ||
text-align: center; | ||
font-size: 16px; | ||
color: #fff; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
旋转木马,通常用来循环播放同一类型的交互内容。 | ||
|
||
### 什么情况下使用? | ||
|
||
- 当有一组平级的内容。 | ||
- 当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 | ||
- 常用于一组图片或卡片轮播。 | ||
|
||
### 什么情况下不使用? | ||
|
||
- 展示一组图片或卡片,空间足够的情况下不需要用轮播图。 | ||
- 图片或卡片的内容相互有逻辑关系,不适合用轮播图。 |
Oops, something went wrong.