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 | } | ... | ... |