updated autoplay and wrote tests
This commit is contained in:
parent
3e6d635650
commit
bfc11079e2
3 changed files with 49 additions and 14 deletions
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :class="prefixCls" v-bind:style="styles">{{width}}<slot></slot></div>
|
||||
<div :class="prefixCls" v-bind:style="styles"><slot></slot></div>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-carousel-item';
|
||||
|
|
|
@ -143,15 +143,18 @@
|
|||
this.updatePos();
|
||||
});
|
||||
},
|
||||
slide () {
|
||||
this.trackLeft = this.currentIndex * this.listWidth;
|
||||
},
|
||||
setAutoplay () {
|
||||
window.clearInterval(this.timer);
|
||||
if (this.autoplay) {
|
||||
this.timer = window.setInterval(() => {
|
||||
this.currentIndex ++;
|
||||
if (this.currentIndex === this.slides.length) this.currentIndex = 0;
|
||||
this.trackLeft = this.currentIndex * this.listWidth;
|
||||
let index = this.currentIndex;
|
||||
index ++;
|
||||
if (index === this.slides.length) index = 0;
|
||||
this.currentIndex = index;
|
||||
}, this.autoplaySpeed);
|
||||
} else {
|
||||
window.clearInterval(this.timer);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -176,12 +179,18 @@
|
|||
autoplay () {
|
||||
this.setAutoplay();
|
||||
},
|
||||
current () {
|
||||
this.switch(this.current);
|
||||
autoplaySpeed () {
|
||||
this.setAutoplay();
|
||||
},
|
||||
currentIndex () {
|
||||
this.$nextTick(() => {
|
||||
this.slide();
|
||||
});
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.handleResize();
|
||||
this.setAutoplay();
|
||||
window.addEventListener('resize', this.handleResize, false);
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
|
|
@ -1,15 +1,41 @@
|
|||
<template>
|
||||
<Carousel style="width: 400px">
|
||||
<Carousel-item>test1</Carousel-item>
|
||||
<Row>
|
||||
<i-col span="2">
|
||||
Current Index
|
||||
<p>{{ currentIndex }}</p>
|
||||
</i-col>
|
||||
<i-col span="2">
|
||||
<p>Autoplay</p>
|
||||
<Switch :checked.sync="autoplay" size="small"></Switch>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Carousel style="width: 400px"
|
||||
:current-index.sync="currentIndex"
|
||||
:autoplay="autoplay"
|
||||
:autoplay-speed="autoplaySpeed">
|
||||
<Carousel-item>
|
||||
<Alert type="warning" show-icon>
|
||||
警告提示文案
|
||||
<template slot="desc">
|
||||
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||
</template>
|
||||
</Alert>
|
||||
</Carousel-item>
|
||||
<Carousel-item>test2</Carousel-item>
|
||||
<Carousel-item>test3</Carousel-item>
|
||||
</Carousel>
|
||||
|
||||
<Carousel :vertical="true">
|
||||
<Carousel-item></Carousel-item>
|
||||
</Carousel>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 2000
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Add table
Reference in a new issue