el-carousel 手动切换上一页和下一页
时间: 2023-10-17 12:31:32 浏览: 135
可以使用`refs`来获取`el-carousel`组件的实例,然后调用其提供的`prev()`和`next()`方法来手动切换上一页和下一页。
示例代码如下:
```vue
<template>
<el-carousel :ref="carouselRef">
<el-carousel-item v-for="(item, index) in carouselItems" :key="index">
<img :src="item.imgUrl" alt="" />
</el-carousel-item>
</el-carousel>
<div>
<button @click="prevPage">上一页</button>
<button @click="nextPage">下一页</button>
</div>
</template>
<script>
export default {
data() {
return {
carouselItems: [
{ imgUrl: 'https://dummyimage.com/600x400/000/fff' },
{ imgUrl: 'https://dummyimage.com/600x400/fff/000' },
{ imgUrl: 'https://dummyimage.com/600x400/000/000' },
],
carouselRef: 'myCarousel',
};
},
methods: {
prevPage() {
this.$refs[this.carouselRef].prev();
},
nextPage() {
this.$refs[this.carouselRef].next();
},
},
};
</script>
```
在上述代码中,我们通过`:ref`指令给`el-carousel`组件设置了一个引用名`myCarousel`,然后在`prevPage()`和`nextPage()`方法中使用`$refs`获取`el-carousel`实例,并调用其`prev()`和`next()`方法实现手动切换上一页和下一页。