drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added offset function

Browse source
This commit is contained in:
Rijn 2017-01-16 17:43:20 -06:00
parent 90f77e4060
commit 77d460e8c4
2 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/carousel/carousel.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div :class="classes"> <div :class="classes">
<div :class="[prefixCls + '-arrow', 'left']"> <div :class="[prefixCls + '-arrow', 'left']" @click="add(-1)">
<div class='placeholder'></div> <div class='placeholder'></div>
<Icon type="arrow-left-b"></Icon> <Icon type="arrow-left-b"></Icon>
</div> </div>
@ -10,7 +10,7 @@
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
<div :class="[prefixCls + '-arrow', 'right']"> <div :class="[prefixCls + '-arrow', 'right']" @click="add(1)">
<div class='placeholder'></div> <div class='placeholder'></div>
<Icon type="arrow-right-b"></Icon> <Icon type="arrow-right-b"></Icon>
</div> </div>
@ -144,6 +144,12 @@
this.updatePos(); this.updatePos();
}); });
}, },
add (offset) {
let index = this.currentIndex;
index += offset;
if (index === this.slides.length) index = 0;
this.currentIndex = index;
},
slide () { slide () {
this.trackLeft = this.currentIndex * this.listWidth; this.trackLeft = this.currentIndex * this.listWidth;
}, },
@ -151,10 +157,7 @@
window.clearInterval(this.timer); window.clearInterval(this.timer);
if (this.autoplay) { if (this.autoplay) {
this.timer = window.setInterval(() => { this.timer = window.setInterval(() => {
let index = this.currentIndex; this.add(1);
index ++;
if (index === this.slides.length) index = 0;
this.currentIndex = index;
}, this.autoplaySpeed); }, this.autoplaySpeed);
} }
} }

8
test/routers/carousel.vue
View file

@ -11,6 +11,14 @@
<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">
Switch To
<Button-group>
<i-button @click="currentIndex = 0">0</i-button>
<i-button @click="currentIndex = 1">1</i-button>
<i-button @click="currentIndex = 2">2</i-button>
</Button-group>
</i-col>
</Row> </Row>
<Carousel style="width: 50%; border: solid 1px #000" <Carousel style="width: 50%; border: solid 1px #000"
:current-index.sync="currentIndex" :current-index.sync="currentIndex"