iview/examples/routers/carousel.vue

40 lines
996 B
Vue
Raw Normal View History

<style>
.demo-carousel{
height: 200px;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 20px;
background: #506b9e;
}
</style>
2017-01-16 02:45:11 -06:00
<template>
<div style="width: 400px;">
2019-09-19 11:54:59 +08:00
<Carousel v-model="value1" loop arrow="always" @on-change="handleChange" @on-click="handlerClick">
<CarouselItem v-for="it in 4" :key="it">
<div class="demo-carousel">
{{it}}
</div>
</CarouselItem>
2017-01-17 16:44:50 -06:00
</Carousel>
2018-06-28 18:09:22 +08:00
<Button @click="value1 = 2">change</Button>
</div>
2017-01-16 02:45:11 -06:00
</template>
<script>
export default {
2017-01-16 04:28:34 -06:00
data () {
return {
value1: 0
2018-02-28 15:38:20 +08:00
}
2017-01-16 17:51:03 -06:00
},
methods: {
handleChange (old, newval) {
2019-09-19 11:54:59 +08:00
console.log(old, newval,'---on-change');
},
handlerClick(index){
console.log(index,'------on-click');
2017-01-16 04:28:34 -06:00
}
2019-09-19 11:54:59 +08:00
},
2017-01-16 02:45:11 -06:00
}
</script>