Commit bbf4ee223f7413874392bc259ca53386fc4e0d40
1 parent
b07521b4
fixed Carousel dot bug when not use v-model
Showing
2 changed files
with
28 additions
and
29 deletions
Show diff stats
examples/routers/carousel.vue
| 1 | +<style> | ||
| 2 | + .demo-carousel{ | ||
| 3 | + height: 200px; | ||
| 4 | + line-height: 200px; | ||
| 5 | + text-align: center; | ||
| 6 | + color: #fff; | ||
| 7 | + font-size: 20px; | ||
| 8 | + background: #506b9e; | ||
| 9 | + } | ||
| 10 | +</style> | ||
| 1 | <template> | 11 | <template> |
| 2 | - <div> | ||
| 3 | - <Carousel v-model="v1" dots="outside" @on-change="hc" :autoplay="false"> | ||
| 4 | - <Carousel-item> | ||
| 5 | - <div class="demo-case-img"> | ||
| 6 | - <img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png"> | ||
| 7 | - </div> | ||
| 8 | - </Carousel-item> | ||
| 9 | - <Carousel-item> | ||
| 10 | - <div class="demo-case-img"> | ||
| 11 | - <img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png"> | ||
| 12 | - </div> | ||
| 13 | - </Carousel-item> | ||
| 14 | - <Carousel-item> | ||
| 15 | - <div class="demo-case-img"> | ||
| 16 | - <img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png"> | ||
| 17 | - </div> | ||
| 18 | - </Carousel-item> | 12 | + <div style="width: 400px;"> |
| 13 | + <Carousel loop arrow="always" @on-change="handleChange"> | ||
| 14 | + <CarouselItem> | ||
| 15 | + <div class="demo-carousel">1</div> | ||
| 16 | + </CarouselItem> | ||
| 17 | + <CarouselItem> | ||
| 18 | + <div class="demo-carousel">2</div> | ||
| 19 | + </CarouselItem> | ||
| 20 | + <CarouselItem> | ||
| 21 | + <div class="demo-carousel">3</div> | ||
| 22 | + </CarouselItem> | ||
| 23 | + <CarouselItem> | ||
| 24 | + <div class="demo-carousel">4</div> | ||
| 25 | + </CarouselItem> | ||
| 19 | </Carousel> | 26 | </Carousel> |
| 20 | - <Button @click="v1 = 2">change</Button> | ||
| 21 | </div> | 27 | </div> |
| 22 | </template> | 28 | </template> |
| 23 | <script> | 29 | <script> |
| 24 | export default { | 30 | export default { |
| 25 | data () { | 31 | data () { |
| 26 | return { | 32 | return { |
| 27 | - v1: 0 | 33 | + value1: 0 |
| 28 | } | 34 | } |
| 29 | }, | 35 | }, |
| 30 | methods: { | 36 | methods: { |
| 31 | - hc (...args) { | ||
| 32 | - console.log(args); | 37 | + handleChange (old, newval) { |
| 38 | + console.log(old, newval); | ||
| 33 | } | 39 | } |
| 34 | } | 40 | } |
| 35 | } | 41 | } |
| 36 | </script> | 42 | </script> |
| 37 | -<style lang="less"> | ||
| 38 | - .demo-case-img { | ||
| 39 | - img{ | ||
| 40 | - width: 500px; | ||
| 41 | - } | ||
| 42 | - } | ||
| 43 | -</style> | ||
| 44 | - |
src/components/carousel/carousel.vue