remove autoplay direction prop
fix clear interval bug
This commit is contained in:
parent
62808b2b03
commit
932db62320
2 changed files with 7 additions and 19 deletions
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="classes">
|
<div :class="classes">
|
||||||
<button :class="arrowClasses" class="left" @click="add(-1)">
|
<button :class="arrowClasses" class="left" @click="arrowEvent(-1)">
|
||||||
<Icon type="chevron-left"></Icon>
|
<Icon type="chevron-left"></Icon>
|
||||||
</button>
|
</button>
|
||||||
<div :class="[prefixCls + '-list']">
|
<div :class="[prefixCls + '-list']">
|
||||||
|
@ -8,7 +8,7 @@
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button :class="arrowClasses" class="right" @click="add(1)">
|
<button :class="arrowClasses" class="right" @click="arrowEvent(1)">
|
||||||
<Icon type="chevron-right"></Icon>
|
<Icon type="chevron-right"></Icon>
|
||||||
</button>
|
</button>
|
||||||
<ul :class="dotsClasses">
|
<ul :class="dotsClasses">
|
||||||
|
@ -47,13 +47,6 @@
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 2000
|
default: 2000
|
||||||
},
|
},
|
||||||
autoplayDirection: {
|
|
||||||
type: String,
|
|
||||||
default: 'left',
|
|
||||||
validator (value) {
|
|
||||||
return oneOf(value, ['left', 'right']);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
easing: {
|
easing: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'ease'
|
default: 'ease'
|
||||||
|
@ -197,6 +190,10 @@
|
||||||
index = index % this.slides.length;
|
index = index % this.slides.length;
|
||||||
this.currentIndex = index;
|
this.currentIndex = index;
|
||||||
},
|
},
|
||||||
|
arrowEvent (offset) {
|
||||||
|
this.setAutoplay();
|
||||||
|
this.add(offset);
|
||||||
|
},
|
||||||
dotsEvent (event, n) {
|
dotsEvent (event, n) {
|
||||||
if (event === this.trigger && this.currentIndex !== n) {
|
if (event === this.trigger && this.currentIndex !== n) {
|
||||||
this.currentIndex = n;
|
this.currentIndex = n;
|
||||||
|
@ -208,7 +205,7 @@
|
||||||
window.clearInterval(this.timer);
|
window.clearInterval(this.timer);
|
||||||
if (this.autoplay) {
|
if (this.autoplay) {
|
||||||
this.timer = window.setInterval(() => {
|
this.timer = window.setInterval(() => {
|
||||||
this.add(this.autoplayDirection === 'left' ? 1 : -1);
|
this.add(1);
|
||||||
}, this.autoplaySpeed);
|
}, this.autoplaySpeed);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -11,13 +11,6 @@
|
||||||
<i-col span="4">
|
<i-col span="4">
|
||||||
Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
|
Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
|
||||||
</i-col>
|
</i-col>
|
||||||
<i-col span="4">
|
|
||||||
<p>Direction</p>
|
|
||||||
<Button-group>
|
|
||||||
<i-button @click="autoplayDirection = 'left'">Left</i-button>
|
|
||||||
<i-button @click="autoplayDirection = 'right'">Right</i-button>
|
|
||||||
</Button-group>
|
|
||||||
</i-col>
|
|
||||||
<i-col span="4">
|
<i-col span="4">
|
||||||
Switch To
|
Switch To
|
||||||
<Button-group>
|
<Button-group>
|
||||||
|
@ -66,7 +59,6 @@
|
||||||
:current-index.sync="currentIndex"
|
:current-index.sync="currentIndex"
|
||||||
:autoplay="autoplay"
|
:autoplay="autoplay"
|
||||||
:autoplay-speed="autoplaySpeed"
|
:autoplay-speed="autoplaySpeed"
|
||||||
:autoplay-direction="autoplayDirection"
|
|
||||||
:dots="dots"
|
:dots="dots"
|
||||||
:trigger="trigger"
|
:trigger="trigger"
|
||||||
:arrow="arrow"
|
:arrow="arrow"
|
||||||
|
@ -193,7 +185,6 @@
|
||||||
currentIndex: 0,
|
currentIndex: 0,
|
||||||
autoplay: true,
|
autoplay: true,
|
||||||
autoplaySpeed: 2000,
|
autoplaySpeed: 2000,
|
||||||
autoplayDirection: 'left',
|
|
||||||
remove: false,
|
remove: false,
|
||||||
pushItem: [],
|
pushItem: [],
|
||||||
arrow: 'hover',
|
arrow: 'hover',
|
||||||
|
|
Loading…
Add table
Reference in a new issue