Commit 932db62320c5fb4e692ec425cea781706999d31d
1 parent
62808b2b
remove autoplay direction prop
fix clear interval bug
Showing
2 changed files
with
7 additions
and
19 deletions
Show diff stats
src/components/carousel/carousel.vue
| 1 | 1 | <template> |
| 2 | 2 | <div :class="classes"> |
| 3 | - <button :class="arrowClasses" class="left" @click="add(-1)"> | |
| 3 | + <button :class="arrowClasses" class="left" @click="arrowEvent(-1)"> | |
| 4 | 4 | <Icon type="chevron-left"></Icon> |
| 5 | 5 | </button> |
| 6 | 6 | <div :class="[prefixCls + '-list']"> |
| ... | ... | @@ -8,7 +8,7 @@ |
| 8 | 8 | <slot></slot> |
| 9 | 9 | </div> |
| 10 | 10 | </div> |
| 11 | - <button :class="arrowClasses" class="right" @click="add(1)"> | |
| 11 | + <button :class="arrowClasses" class="right" @click="arrowEvent(1)"> | |
| 12 | 12 | <Icon type="chevron-right"></Icon> |
| 13 | 13 | </button> |
| 14 | 14 | <ul :class="dotsClasses"> |
| ... | ... | @@ -47,13 +47,6 @@ |
| 47 | 47 | type: Number, |
| 48 | 48 | default: 2000 |
| 49 | 49 | }, |
| 50 | - autoplayDirection: { | |
| 51 | - type: String, | |
| 52 | - default: 'left', | |
| 53 | - validator (value) { | |
| 54 | - return oneOf(value, ['left', 'right']); | |
| 55 | - } | |
| 56 | - }, | |
| 57 | 50 | easing: { |
| 58 | 51 | type: String, |
| 59 | 52 | default: 'ease' |
| ... | ... | @@ -197,6 +190,10 @@ |
| 197 | 190 | index = index % this.slides.length; |
| 198 | 191 | this.currentIndex = index; |
| 199 | 192 | }, |
| 193 | + arrowEvent (offset) { | |
| 194 | + this.setAutoplay(); | |
| 195 | + this.add(offset); | |
| 196 | + }, | |
| 200 | 197 | dotsEvent (event, n) { |
| 201 | 198 | if (event === this.trigger && this.currentIndex !== n) { |
| 202 | 199 | this.currentIndex = n; |
| ... | ... | @@ -208,7 +205,7 @@ |
| 208 | 205 | window.clearInterval(this.timer); |
| 209 | 206 | if (this.autoplay) { |
| 210 | 207 | this.timer = window.setInterval(() => { |
| 211 | - this.add(this.autoplayDirection === 'left' ? 1 : -1); | |
| 208 | + this.add(1); | |
| 212 | 209 | }, this.autoplaySpeed); |
| 213 | 210 | } |
| 214 | 211 | }, | ... | ... |
test/routers/carousel.vue
| ... | ... | @@ -12,13 +12,6 @@ |
| 12 | 12 | Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider> |
| 13 | 13 | </i-col> |
| 14 | 14 | <i-col span="4"> |
| 15 | - <p>Direction</p> | |
| 16 | - <Button-group> | |
| 17 | - <i-button @click="autoplayDirection = 'left'">Left</i-button> | |
| 18 | - <i-button @click="autoplayDirection = 'right'">Right</i-button> | |
| 19 | - </Button-group> | |
| 20 | - </i-col> | |
| 21 | - <i-col span="4"> | |
| 22 | 15 | Switch To |
| 23 | 16 | <Button-group> |
| 24 | 17 | <i-button @click="currentIndex = 0">0</i-button> |
| ... | ... | @@ -66,7 +59,6 @@ |
| 66 | 59 | :current-index.sync="currentIndex" |
| 67 | 60 | :autoplay="autoplay" |
| 68 | 61 | :autoplay-speed="autoplaySpeed" |
| 69 | - :autoplay-direction="autoplayDirection" | |
| 70 | 62 | :dots="dots" |
| 71 | 63 | :trigger="trigger" |
| 72 | 64 | :arrow="arrow" |
| ... | ... | @@ -193,7 +185,6 @@ |
| 193 | 185 | currentIndex: 0, |
| 194 | 186 | autoplay: true, |
| 195 | 187 | autoplaySpeed: 2000, |
| 196 | - autoplayDirection: 'left', | |
| 197 | 188 | remove: false, |
| 198 | 189 | pushItem: [], |
| 199 | 190 | arrow: 'hover', | ... | ... |