fixed Carousel dot bug when not use v-model

This commit is contained in:
梁灏 2018-06-28 17:41:25 +08:00
parent b07521b4e4
commit bbf4ee223f
2 changed files with 28 additions and 29 deletions

View file

@ -1,44 +1,42 @@
<style>
.demo-carousel{
height: 200px;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 20px;
background: #506b9e;
}
</style>
<template> <template>
<div> <div style="width: 400px;">
<Carousel v-model="v1" dots="outside" @on-change="hc" :autoplay="false"> <Carousel loop arrow="always" @on-change="handleChange">
<Carousel-item> <CarouselItem>
<div class="demo-case-img"> <div class="demo-carousel">1</div>
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png"> </CarouselItem>
</div> <CarouselItem>
</Carousel-item> <div class="demo-carousel">2</div>
<Carousel-item> </CarouselItem>
<div class="demo-case-img"> <CarouselItem>
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png"> <div class="demo-carousel">3</div>
</div> </CarouselItem>
</Carousel-item> <CarouselItem>
<Carousel-item> <div class="demo-carousel">4</div>
<div class="demo-case-img"> </CarouselItem>
<img src="https://file.iviewui.com/dist/84b3cded4163febf9dae090e76129322.png">
</div>
</Carousel-item>
</Carousel> </Carousel>
<Button @click="v1 = 2">change</Button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
v1: 0 value1: 0
} }
}, },
methods: { methods: {
hc (...args) { handleChange (old, newval) {
console.log(args); console.log(old, newval);
} }
} }
} }
</script> </script>
<style lang="less">
.demo-case-img {
img{
width: 500px;
}
}
</style>

View file

@ -227,6 +227,7 @@
} else { } else {
this.trackIndex = index; this.trackIndex = index;
} }
this.currentIndex = index;
}, },
add (offset) { add (offset) {
// //