updated autoplay and wrote tests

Rijn
1 parent 3e6d6356
Showing 3 changed files with 49 additions and 14 deletions Show diff stats
src/components/carousel/carousel-item.vue
src/components/carousel/carousel.vue
test/routers/carousel.vue
 <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 () {
 <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>