本文实例为大家分享了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; } }, 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 () { } }</script><style scoped> *{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; }</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。