本文实例为大家分享了vue组件开发之slider组件的具体使用代码,供大家参考,具体内容如下
代码如下:
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;
}
},
next () {
console.log(this.count);
if(this.count < 3){
this.count++;
document.querySelector(".wrapbox").style.webkitTransform = "translateX(-" + (this.count * 400) + "px)";
}else{
this.count = 3;
}
}
},
created () {
}
}
*{margin:0 auto;padding:0;font-family:"微软雅黑";}
.slider{
position:relative;
height:200px;
width:400px;
margin:50px auto;
overflow:hidden;
}
.slider .wrapbox{
width:1600px;
height:200px;
transition:all 1.5s;
}
.slider .status{
position:absolute;
top:170px;
height:20px;
width:400px;
text-align:center;
}
.slider .status span{
display:inline-block;
height:20px;
width:20px;
margin:0 10px;
background:#eee;
border-radius:10px;
}
.slider .status span.active{
background:#352929;
}
.slider .wrapbox .item{
float:left;
height:200px;
width:400px;
line-height:200px;
text-align:Center;
color:#fff;
font-size:25px;
background:red;
}
.slider .wrapbox .item:nth-of-type(2){
background:blue;
}
.slider .wrapbox .item:nth-of-type(3){
background:yellow;
}
.slider .wrapbox .item:nth-of-type(4){
background:green;
}
.slider .btn{
position:absolute;
top:50%;
height:40px;
width:20px;
line-height:40px;
color:#fff;
text-align:center;
background:rgba(10, 10, 10, .85);
transform:translateY(-50%);
cursor:pointer;
}
.slider .next-btn{
right:0;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。