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>