added on-change event emitter

This commit is contained in:
Rijn 2017-01-17 14:35:23 -06:00
parent e9989f2b85
commit c1af3facb0
2 changed files with 12 additions and 3 deletions

View file

@ -186,7 +186,7 @@
this.currentIndex = index; this.currentIndex = index;
}, },
dotsEvent (event, n) { dotsEvent (event, n) {
if (event === this.trigger) { if (event === this.trigger && this.currentIndex !== n) {
this.$emit('on-change', this.currentIndex, n); this.$emit('on-change', this.currentIndex, n);
this.currentIndex = n; this.currentIndex = n;
} }
@ -210,7 +210,8 @@
autoplaySpeed () { autoplaySpeed () {
this.setAutoplay(); this.setAutoplay();
}, },
currentIndex () { currentIndex (val, oldVal) {
this.$emit('on-change', oldVal, val);
this.$nextTick(() => { this.$nextTick(() => {
this.trackLeft = this.currentIndex * this.listWidth; this.trackLeft = this.currentIndex * this.listWidth;
}); });

View file

@ -54,6 +54,7 @@
:dots="dots" :dots="dots"
:trigger="trigger" :trigger="trigger"
:arrow="arrow" :arrow="arrow"
@on-change="slideChange"
easing="linear"> easing="linear">
<Carousel-item v-if="!remove"> <Carousel-item v-if="!remove">
<Alert type="warning" show-icon> <Alert type="warning" show-icon>
@ -71,6 +72,9 @@
<Icon type="checkmark" style="font-size: 5em"></Icon>{{item}} <Icon type="checkmark" style="font-size: 5em"></Icon>{{item}}
</Carousel-item> </Carousel-item>
</Carousel> </Carousel>
<div>
<p v-for="item in log">{{item}}</p>
</div>
</template> </template>
<script> <script>
export default { export default {
@ -83,12 +87,16 @@
pushItem: [], pushItem: [],
arrow: 'hover', arrow: 'hover',
trigger: 'click', trigger: 'click',
dots: 'inside' dots: 'inside',
log: []
} }
}, },
methods: { methods: {
push () { push () {
this.pushItem.push('test'); this.pushItem.push('test');
},
slideChange (from, to) {
this.log.push(`From ${from} To ${to}`);
} }
} }
} }