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