我需要在Vuetify轮播中为每个 v-carousel-item 设置不同的时间。
答案 0 :(得分:1)
诀窍是更新传递给轮播的反应性属性,并使用@input
事件来检测幻灯片,如下所示:
<!-- TEMPLATE -->
<v-carousel cycle :interval="interval" @input="onSlideChange">
<v-carousel-item :key="1">First Item</v-carousel-item>
<v-carousel-item :key="2">Second Item</v-carousel-item>
</v-carousel>
事件处理程序将在每次幻灯片更改时更新属性interval
:
const instance = new Vue({
data() {
// Use default interval of 1000ms
return {
interval: 1000
}
},
methods: {
onSlideChange(slideNumber) {
if (slideNumber === 1) {
this.interval === 500;
} else if (slideNumber === 2) {
this.interval === 800;
} else {
this.interval === 1000;
}
}
}
});