vue组件开发之组件开发之slider组件使用详解组件使用详解
主要为大家详细介绍了vue组件开发之slider组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,
感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue组件开发之slider组件的具体使用代码,供大家参考,具体内容如下
代码如下:
<template>
<div class="slider">
<div class="wrapbox">
<div class="item" v-for="(item, index) in items" style="">{{item.title}}</div>
</div>
<div class="status">
<span v-for="(item, index) in items" v-bind:class="index == count ? 'active' : '' "></span>
</div>
<div class="prev-btn btn" @click="prev()"><</div>
<div class="next-btn btn" @click="next()">></div>
</div>
</template>
<script>
export default {
name: 'slider',
data (){
return {
count: 0,
items:[{
name:"1",
id:1,
title:"我是图1的内容"
},{
name:"2",
id:2,
title:"我是图2的内容"
},{
name:"3",
id:3,
title:"我是图3的内容"
},{
name:"4",
id:4,
title:"我是图4的内容"
}]
}
},
components: { },
methods: {
prev () {
console.log(this.count);
if(this.count > 0){
this.count--;
document.querySelector(".wrapbox").style.webkitTransform = "translateX(-" + (this.count * 400) + "px)";
}else{
this.count = 0;
评论0