Commit bfc11079e27d494cdf3528c4c6c7b4fec23e95ad

Authored by Rijn
1 parent 3e6d6356

updated autoplay and wrote tests

src/components/carousel/carousel-item.vue
1 1 <template>
2   - <div :class="prefixCls" v-bind:style="styles">{{width}}<slot></slot></div>
  2 + <div :class="prefixCls" v-bind:style="styles"><slot></slot></div>
3 3 </template>
4 4 <script>
5 5 const prefixCls = 'ivu-carousel-item';
... ...
src/components/carousel/carousel.vue
... ... @@ -143,15 +143,18 @@
143 143 this.updatePos();
144 144 });
145 145 },
  146 + slide () {
  147 + this.trackLeft = this.currentIndex * this.listWidth;
  148 + },
146 149 setAutoplay () {
  150 + window.clearInterval(this.timer);
147 151 if (this.autoplay) {
148 152 this.timer = window.setInterval(() => {
149   - this.currentIndex ++;
150   - if (this.currentIndex === this.slides.length) this.currentIndex = 0;
151   - this.trackLeft = this.currentIndex * this.listWidth;
  153 + let index = this.currentIndex;
  154 + index ++;
  155 + if (index === this.slides.length) index = 0;
  156 + this.currentIndex = index;
152 157 }, this.autoplaySpeed);
153   - } else {
154   - window.clearInterval(this.timer);
155 158 }
156 159 }
157 160 },
... ... @@ -176,12 +179,18 @@
176 179 autoplay () {
177 180 this.setAutoplay();
178 181 },
179   - current () {
180   - this.switch(this.current);
  182 + autoplaySpeed () {
  183 + this.setAutoplay();
  184 + },
  185 + currentIndex () {
  186 + this.$nextTick(() => {
  187 + this.slide();
  188 + });
181 189 }
182 190 },
183 191 ready () {
184 192 this.handleResize();
  193 + this.setAutoplay();
185 194 window.addEventListener('resize', this.handleResize, false);
186 195 },
187 196 beforeDestroy () {
... ...
test/routers/carousel.vue
1 1 <template>
2   - <Carousel style="width: 400px">
3   - <Carousel-item>test1</Carousel-item>
  2 + <Row>
  3 + <i-col span="2">
  4 + Current Index
  5 + <p>{{ currentIndex }}</p>
  6 + </i-col>
  7 + <i-col span="2">
  8 + <p>Autoplay</p>
  9 + <Switch :checked.sync="autoplay" size="small"></Switch>
  10 + </i-col>
  11 + <i-col span="4">
  12 + Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
  13 + </i-col>
  14 + </Row>
  15 + <Carousel style="width: 400px"
  16 + :current-index.sync="currentIndex"
  17 + :autoplay="autoplay"
  18 + :autoplay-speed="autoplaySpeed">
  19 + <Carousel-item>
  20 + <Alert type="warning" show-icon>
  21 + 警告提示文案
  22 + <template slot="desc">
  23 + 警告的提示描述文案警告的提示描述文案警告的提示描述文案
  24 + </template>
  25 + </Alert>
  26 + </Carousel-item>
4 27 <Carousel-item>test2</Carousel-item>
5 28 <Carousel-item>test3</Carousel-item>
6 29 </Carousel>
7   -
8   - <Carousel :vertical="true">
9   - <Carousel-item></Carousel-item>
10   - </Carousel>
11 30 </template>
12 31 <script>
13 32 export default {
  33 + data () {
  34 + return {
  35 + currentIndex: 0,
  36 + autoplay: true,
  37 + autoplaySpeed: 2000
  38 + }
  39 + }
14 40 }
15 41 </script>
... ...