<template>
<div class="boxdiv">
<Carousel v-model="value1" loop>
<CarouselItem class="car">
<div class="demo-carousel">
<div class="test" @click="abc">1</div>
</div>
</CarouselItem>
<CarouselItem>
<div class="demo-carousel">2</div>
</CarouselItem>
</Carousel>
</div>
</template>
<script>
export default {
data () {
return {
value1: 0
}
},
methods:{
abc(){
console.log(11111);
}
}
}
</script>
<style lang="less">
.boxdiv {
height: 600px;
.demo-carousel {
width: 100%;
height: 500px;
background-color: -sharpfff;
.test {
width: 50px;
height: 50px;
margin: 0 auto;
background-color: red;
}
}
}
</style>
this is a carousel component copied from Carousel Walking Lantern iview. I added a div to one of the CarouselItem
and bound the @ click event. Every time I rotated to this CarouselItem
, I clicked on the click event on the div inside, and it alternately failed to click.
I hope a boss will try this phenomenon. I"m not sure if it"s my writing or the component itself