javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [carousel] export activeIndex (#17650)

Browse Source 
Co-authored-by: qiang <qw13131wang@gmail.com>
This commit is contained in:
sea
2024-07-26 10:20:25 +08:00
committed by GitHub
parent a11a7d09dc
commit 0b2f6911a9
3 changed files with 39 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/en-US/component/carousel.md
View File

@@ -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

31
packages/components/carousel/__tests__/carousel.test.tsx
View File

@@ -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)
})
})

2
packages/components/carousel/src/carousel.vue
View File

@@ -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 */