本文实例为大家分享了vue组件开发之滑块组件的具体使用代码,供大家参考,具体内容如下
代码如下:
& lt; template>
& lt; div类=盎椤北?
& lt; div类=皐rapbox”比;
& lt; div类="项目" v=?项目、索引)项目”在{{item.title}} & lt;/div>
& lt;/div>
& lt; div类="地位"比;
& lt;跨度v="(项目、索引)项目”v-bind:类="指数==数& # 63;“活跃”:“在& lt;/span>
& lt;/div>
& lt; div类=皃rev-btn btn @click”=吧弦灰?)”祝辞& lt; & lt;/div>
& lt; div类=皀ext-btn btn @click”=跋乱桓?)”在祝辞& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“滑块”,
数据(){
返回{
数:0,
项目:[{
名称:“1”,
id: 1、
标题:“我是图1的内容”
},{
名称:“2”,
id: 2
标题:“我是图2的内容”
},{
名称:“3”,
id: 3,
标题:“我是图3所示的内容”
},{
名称:“4”,
id: 4
标题:“我是图4的内容”
})
}
},
组件:{},
方法:{
上一页(){
console.log (this.count);
如果这一点。数比;0){
this.count——;
document.querySelector .style (“.wrapbox”)。webkitTransform=" translateX(- " +(这一点。数* 400)+“px)”;
其他}{
这一点。数=0;
}
},
next () {
console.log (this.count);
如果这一点。数& lt;3){
this.count + +;
document.querySelector .style (“.wrapbox”)。webkitTransform=" translateX(- " +(这一点。数* 400)+“px)”;
其他}{
这一点。数=3;
}
}
},
创建(){
}
}
& lt;/script>
& lt; scoped>风格;
*{保证金:0汽车;填充:0;字体类型:“微软雅黑”;}
.slider {
位置:相对;
身高:200 px;
宽度:400 px;
保证金:50 px汽车;
溢出:隐藏;
}
.slider .wrapbox {
宽度:1600 px;
身高:200 px;
过渡:所有1.5年代;
}
.slider .status {
位置:绝对的;
前:170像素;
高度:20 px;
宽度:400 px;
text-align:中心;
}
.slider .status跨度{
显示:inline-block;
高度:20 px;
宽度:20 px;
保证金:0 10 px;
背景:# eee;
border - radius: 10 px;
}
.slider .status span.active {
背景:# 352929;
}
.slider .wrapbox .item {
浮:左;
身高:200 px;
宽度:400 px;
行高:200 px;
text-align:中心;
颜色:# fff;
字体大小:25 px;
背景:红色;
}
.slider .wrapbox .item: nth-of-type (2) {
背景:蓝色;
}
.slider .wrapbox .item: nth-of-type (3) {
背景:黄色;
}
.slider .wrapbox .item: nth-of-type (4) {
背景:绿色;
}
.slider .btn {
位置:绝对的;
上图:50%;
高度:40像素;
宽度:20 px;
行高:40像素;
颜色:# fff;
text-align:中心;
背景:rgba (10、10、10、.85);
变换:translateY (-50%);
光标:指针;
}
.slider .next-btn {
右:0;
}
& lt;/style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
