vue组件开发之tab切换组件

<template>
    <div class="tab-slider">
        <div class="tab">
            <span v-for="(item, index) in items" v-bind:class="{active: actived == index}" @click="toggle(index)">{{item.tab}}</span>
        </div>
        <div class="tab-content">
            <div class="wrapbox clearboth">
                <div class="item" v-for="(item, index) in items">{{item.tabContent}}</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'tabSlider',
        data (){
            return {
                actived: 0,
                items: [{
                    'tab': 'tab1',
                    'tabContent': 'content1'
                },{
                    'tab': 'tab2',
                    'tabContent': 'content2'
                },{
                    'tab': 'tab3',
                    'tabContent': 'content3'
                },{
                    'tab': 'tab4',
                    'tabContent': 'content4'
                }]
            }
        },
        methods: {
            //获取图片base64实现预览
            toggle(index){
                this.actived = index;                          
                document.querySelector(".tab-content .wrapbox").style.webkitTransform = "translateX(-" + (this.actived * 400) + "px)";

            }
           
        }
    }
</script>
<style scoped>
    *{margin:0 auto;padding:0;font-family:"微软雅黑";}
    .clearboth::after{
        content:"";
        display:block;
        clear:both;
    }
    .tab-slider{
        height:auto;
        width:400px;
        margin:50px auto;
    }
    .tab-slider .tab{
        display:flex;
        height:40px;
        line-height:40px;
        background:#ccc;
    }
    .tab-slider .tab span{
        display:block;
        width:100%;
        text-align:center;
        cursor:default;
    }
    .tab-slider .tab .active{
        background:red;
    }
    .tab-slider .tab-content{
        height:300px;
        width:400px;
        overflow:hidden;
    }
    .tab-slider .tab-content .item{
        float:left;
        height:300px;
        width:400px;
        line-height:300px;
        text-align:center;
        font-size:60px;
        background:#eee;
    }
    .tab-slider .wrapbox{
        width:2000px;
        transition: all 1s;
    }
</style>