updated autoplay and wrote tests

This commit is contained in:
Rijn 2017-01-16 04:28:34 -06:00
parent 3e6d635650
commit bfc11079e2
3 changed files with 49 additions and 14 deletions

View file

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

View file

@ -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 () {

View file

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