Commit c1af3facb0c8af179ae06bcf17a824a90c63b66e
1 parent
e9989f2b
added on-change event emitter
Showing
2 changed files
with
12 additions
and
3 deletions
Show diff stats
src/components/carousel/carousel.vue
| ... | ... | @@ -186,7 +186,7 @@ |
| 186 | 186 | this.currentIndex = index; |
| 187 | 187 | }, |
| 188 | 188 | dotsEvent (event, n) { |
| 189 | - if (event === this.trigger) { | |
| 189 | + if (event === this.trigger && this.currentIndex !== n) { | |
| 190 | 190 | this.$emit('on-change', this.currentIndex, n); |
| 191 | 191 | this.currentIndex = n; |
| 192 | 192 | } |
| ... | ... | @@ -210,7 +210,8 @@ |
| 210 | 210 | autoplaySpeed () { |
| 211 | 211 | this.setAutoplay(); |
| 212 | 212 | }, |
| 213 | - currentIndex () { | |
| 213 | + currentIndex (val, oldVal) { | |
| 214 | + this.$emit('on-change', oldVal, val); | |
| 214 | 215 | this.$nextTick(() => { |
| 215 | 216 | this.trackLeft = this.currentIndex * this.listWidth; |
| 216 | 217 | }); | ... | ... |
test/routers/carousel.vue
| ... | ... | @@ -54,6 +54,7 @@ |
| 54 | 54 | :dots="dots" |
| 55 | 55 | :trigger="trigger" |
| 56 | 56 | :arrow="arrow" |
| 57 | + @on-change="slideChange" | |
| 57 | 58 | easing="linear"> |
| 58 | 59 | <Carousel-item v-if="!remove"> |
| 59 | 60 | <Alert type="warning" show-icon> |
| ... | ... | @@ -71,6 +72,9 @@ |
| 71 | 72 | <Icon type="checkmark" style="font-size: 5em"></Icon>{{item}} |
| 72 | 73 | </Carousel-item> |
| 73 | 74 | </Carousel> |
| 75 | + <div> | |
| 76 | + <p v-for="item in log">{{item}}</p> | |
| 77 | + </div> | |
| 74 | 78 | </template> |
| 75 | 79 | <script> |
| 76 | 80 | export default { |
| ... | ... | @@ -83,12 +87,16 @@ |
| 83 | 87 | pushItem: [], |
| 84 | 88 | arrow: 'hover', |
| 85 | 89 | trigger: 'click', |
| 86 | - dots: 'inside' | |
| 90 | + dots: 'inside', | |
| 91 | + log: [] | |
| 87 | 92 | } |
| 88 | 93 | }, |
| 89 | 94 | methods: { |
| 90 | 95 | push () { |
| 91 | 96 | this.pushItem.push('test'); |
| 97 | + }, | |
| 98 | + slideChange (from, to) { | |
| 99 | + this.log.push(`From ${from} To ${to}`); | |
| 92 | 100 | } |
| 93 | 101 | } |
| 94 | 102 | } | ... | ... |