vivo-ui
Version:
vivo ui component lib for vue
77 lines (76 loc) • 2.32 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="../../dist/lib.js"></script>
<style>
.item {
min-height: 300px;
font-size: 50px;
background: red;
}
</style>
</head>
<body>
<div id="content">
<div>
interval<input type="range" min="0" max="10000" v-model.number="interval">
</div>
<div>
duration<input type="range" min="0" max="5000" v-model.number="duration">
</div>
<div>
方向
<input type="radio" name="direction" value="up" v-model="direction">上
<input type="radio" name="direction" value="down" v-model="direction">下
<input type="radio" name="direction" value="left" v-model="direction">左
<input type="radio" name="direction" value="right" v-model="direction">右️
</div>
<div>
是否循环<input type="checkbox" v-model="loop">
</div>
<div>
当前位置<input type="number" v-model.number="index">
</div>
<button @click="update">改变内容</button>
<swiper v-model="index" :direction="direction" :loop="loop" :interval="interval" :duration="duration"
@change="change" ref="carousel">
<swiper-item v-for="item in list" :key="item">
<div class="item">{{item}}</div>
</swiper-item>
</swiper>
</div>
<script>
var vm = new Vue({
el: '#content',
data: {
index: 0,
list: [0, 1, 2, 3],
direction: 'left',
loop: true,
interval: 2000,
duration: 30
},
methods: {
update: function () {
var len = 1 + Math.random() * 10, repeat;
this.list = [];
for (var i = 0; i < len; i++) {
repeat = 5 + Math.random() * 50;
this.list.push(i + '----' + ('大噶多少个撒高度'.repeat(repeat)));
}
},
change: function (value) {
console.log(value);
}
},
components: {
Swiper: VUI.Swiper,
SwiperItem: VUI.SwiperItem
}
});
</script>
</body>
</html>