antd-vue中Carousel的监听事件
时间: 2023-05-20 19:00:40 浏览: 428
antd-mobile-vue:antd-mobile的vue实现
5星 · 资源好评率100%
您可以使用Carousel的onChange事件来监听轮播图的变化。onChange事件会传递一个参数,表示当前轮播图的索引值。您可以在这个事件中编写相应的逻辑来处理轮播图的变化。以下是一个示例代码:
<template>
<a-carousel :autoplay="true" @change="handleChange">
<a-carousel-slide v-for="(item, index) in items" :key="index">
<img :src="item.src" alt="">
</a-carousel-slide>
</a-carousel>
</template>
<script>
export default {
data() {
return {
items: [
{ src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' },
{ src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' },
{ src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' },
],
};
},
methods: {
handleChange(index) {
console.log('当前轮播图的索引值为:', index);
},
},
};
</script>
阅读全文