other / mew-iview

Commit 62808b2b030ad7c8b91a06c86b81a8ecdafc7c28

Authored by Rijn
1 parent 1cc06612

reset autoplay timer after trigger 

add prop: autoplay direction
Showing 2 changed files with 21 additions and 2 deletions   Show diff stats
Inline Side-by-side
src/components/carousel/carousel.vue
  Show/Hide comments   View file @62808b2
@@ -47,6 +47,13 @@ @@ -47,6 +47,13 @@
47 type: Number, 47 type: Number,
48 default: 2000 48 default: 2000
49 }, 49 },
  50 + autoplayDirection: {
  51 + type: String,
  52 + default: 'left',
  53 + validator (value) {
  54 + return oneOf(value, ['left', 'right']);
  55 + }
  56 + },
50 easing: { 57 easing: {
51 type: String, 58 type: String,
52 default: 'ease' 59 default: 'ease'
@@ -175,11 +182,13 @@ @@ -175,11 +182,13 @@
175 182
176 this.updateSlides(true, true); 183 this.updateSlides(true, true);
177 this.updatePos(); 184 this.updatePos();
  185 + this.updateOffset();
178 }); 186 });
179 }, 187 },
180 handleResize () { 188 handleResize () {
181 this.listWidth = parseInt(getStyle(this.$el, 'width')); 189 this.listWidth = parseInt(getStyle(this.$el, 'width'));
182 this.updatePos(); 190 this.updatePos();
  191 + this.updateOffset();
183 }, 192 },
184 add (offset) { 193 add (offset) {
185 let index = this.currentIndex; 194 let index = this.currentIndex;
@@ -191,19 +200,20 @@ @@ -191,19 +200,20 @@
191 dotsEvent (event, n) { 200 dotsEvent (event, n) {
192 if (event === this.trigger && this.currentIndex !== n) { 201 if (event === this.trigger && this.currentIndex !== n) {
193 this.currentIndex = n; 202 this.currentIndex = n;
  203 + // Reset autoplay timer when trigger be activated
  204 + this.setAutoplay();
194 } 205 }
195 }, 206 },
196 setAutoplay () { 207 setAutoplay () {
197 window.clearInterval(this.timer); 208 window.clearInterval(this.timer);
198 if (this.autoplay) { 209 if (this.autoplay) {
199 this.timer = window.setInterval(() => { 210 this.timer = window.setInterval(() => {
200 - this.add(1); 211 + this.add(this.autoplayDirection === 'left' ? 1 : -1);
201 }, this.autoplaySpeed); 212 }, this.autoplaySpeed);
202 } 213 }
203 }, 214 },
204 updateOffset () { 215 updateOffset () {
205 this.$nextTick(() => { 216 this.$nextTick(() => {
206 - this.handleResize();  
207 this.trackOffset = this.currentIndex * this.listWidth; 217 this.trackOffset = this.currentIndex * this.listWidth;
208 }); 218 });
209 } 219 }
test/routers/carousel.vue
  Show/Hide comments   View file @62808b2
@@ -12,6 +12,13 @@ @@ -12,6 +12,13 @@
12 Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider> 12 Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
13 </i-col> 13 </i-col>
14 <i-col span="4"> 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">
15 Switch To 22 Switch To
16 <Button-group> 23 <Button-group>
17 <i-button @click="currentIndex = 0">0</i-button> 24 <i-button @click="currentIndex = 0">0</i-button>
@@ -59,6 +66,7 @@ @@ -59,6 +66,7 @@
59 :current-index.sync="currentIndex" 66 :current-index.sync="currentIndex"
60 :autoplay="autoplay" 67 :autoplay="autoplay"
61 :autoplay-speed="autoplaySpeed" 68 :autoplay-speed="autoplaySpeed"
  69 + :autoplay-direction="autoplayDirection"
62 :dots="dots" 70 :dots="dots"
63 :trigger="trigger" 71 :trigger="trigger"
64 :arrow="arrow" 72 :arrow="arrow"
@@ -185,6 +193,7 @@ @@ -185,6 +193,7 @@
185 currentIndex: 0, 193 currentIndex: 0,
186 autoplay: true, 194 autoplay: true,
187 autoplaySpeed: 2000, 195 autoplaySpeed: 2000,
  196 + autoplayDirection: 'left',
188 remove: false, 197 remove: false,
189 pushItem: [], 198 pushItem: [],
190 arrow: 'hover', 199 arrow: 'hover',