Commit bfc11079e27d494cdf3528c4c6c7b4fec23e95ad
1 parent
3e6d6356
updated autoplay and wrote tests
Showing
3 changed files
with
49 additions
and
14 deletions
Show diff stats
src/components/carousel/carousel-item.vue
| 1 | <template> | 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 | </template> | 3 | </template> |
| 4 | <script> | 4 | <script> |
| 5 | const prefixCls = 'ivu-carousel-item'; | 5 | const prefixCls = 'ivu-carousel-item'; |
src/components/carousel/carousel.vue
| @@ -143,15 +143,18 @@ | @@ -143,15 +143,18 @@ | ||
| 143 | this.updatePos(); | 143 | this.updatePos(); |
| 144 | }); | 144 | }); |
| 145 | }, | 145 | }, |
| 146 | + slide () { | ||
| 147 | + this.trackLeft = this.currentIndex * this.listWidth; | ||
| 148 | + }, | ||
| 146 | setAutoplay () { | 149 | setAutoplay () { |
| 150 | + window.clearInterval(this.timer); | ||
| 147 | if (this.autoplay) { | 151 | if (this.autoplay) { |
| 148 | this.timer = window.setInterval(() => { | 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 | }, this.autoplaySpeed); | 157 | }, this.autoplaySpeed); |
| 153 | - } else { | ||
| 154 | - window.clearInterval(this.timer); | ||
| 155 | } | 158 | } |
| 156 | } | 159 | } |
| 157 | }, | 160 | }, |
| @@ -176,12 +179,18 @@ | @@ -176,12 +179,18 @@ | ||
| 176 | autoplay () { | 179 | autoplay () { |
| 177 | this.setAutoplay(); | 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 | ready () { | 191 | ready () { |
| 184 | this.handleResize(); | 192 | this.handleResize(); |
| 193 | + this.setAutoplay(); | ||
| 185 | window.addEventListener('resize', this.handleResize, false); | 194 | window.addEventListener('resize', this.handleResize, false); |
| 186 | }, | 195 | }, |
| 187 | beforeDestroy () { | 196 | beforeDestroy () { |
test/routers/carousel.vue
| 1 | <template> | 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 | <Carousel-item>test2</Carousel-item> | 27 | <Carousel-item>test2</Carousel-item> |
| 5 | <Carousel-item>test3</Carousel-item> | 28 | <Carousel-item>test3</Carousel-item> |
| 6 | </Carousel> | 29 | </Carousel> |
| 7 | - | ||
| 8 | - <Carousel :vertical="true"> | ||
| 9 | - <Carousel-item></Carousel-item> | ||
| 10 | - </Carousel> | ||
| 11 | </template> | 30 | </template> |
| 12 | <script> | 31 | <script> |
| 13 | export default { | 32 | export default { |
| 33 | + data () { | ||
| 34 | + return { | ||
| 35 | + currentIndex: 0, | ||
| 36 | + autoplay: true, | ||
| 37 | + autoplaySpeed: 2000 | ||
| 38 | + } | ||
| 39 | + } | ||
| 14 | } | 40 | } |
| 15 | </script> | 41 | </script> |