使用VUE搭建tab标签组件

Vue2.0 多 Tab切换组件简单封装，满足自己简单的功能，可以直接拿去使用！

首先上效果图：

功能简单介绍：

1、支持tab切换

2、支持tab定位

3、支持tab自动化

仿React多Tab实现，总之可以正常使用满足日常需求，

1、使用方法：

==index.vue文件==

<TabItems>
    <div name="买入" class="first">
        <Content :isContTab = "0" />
    </div>
    <div name="自动再平衡" class="second">
        <Content :isContTab = "1" />
    </div>
    <div name="一键卖出" class="three">
        <Content :isContTab = "2" />
    </div>
</TabItems>

PS：TabItems是我的TabSwitch组件，tab页面标题就是 div 中的name值，俩面是内容，也可以是子组件。

接下来展示TabItems组件

2、组件

index.less文件

body,html {margin: 0;}

* {
    opacity: 1;
    -webkit-backface-visibility: hidden;
}

.tabItems {
    .Tab_tittle_wrap {
        position: absolute;
        width: 100%;
        top: 0;
        z-index: 2;
        background: @ffffff;
        display: -webkit-box;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: @222222;
        border-bottom: 1px solid rgba(46, 177, 255, 0.08);
        box-shadow: 0px 0px 25px 6px rgba(46, 177, 255, 0.21);
        span {
            display: block;
            text-align: center;
            width: 26%;
            margin: 0 24px;
            font-size: 26px;
            position: relative;
            i {
                display: inline-block;
                position: absolute;
                width: 1px;
                height: 50px;
                top: 15px;
                right: -24px;
                background: @dddddd;
            }
            &:last-child {
                i {
                    display: none;
                }
            }
        }
        .router-link-active {
            color: #8097f9;
            border-bottom: 1px solid #8097f9;
        }
    }
    .Tab_item_wrap {
        position: absolute;
        top: 82px;
        width: 100%;
        z-index: 0;
        background: @ffffff;
        bottom: 0;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .showAnminous {
        opacity: 1;
        -webkit-backface-visibility: hidden;
        -webkit-animation-name: "rightMove";
        /*动画名称，需要跟@keyframes定义的名称一致*/
        -webkit-animation-duration: .3s;
        /*动画持续的时间长*/
        -webkit-animation-iteration-count: 1;
        /*动画循环播放的次数为1 infinite为无限次*/
    }
}

@-webkit-keyframes rightMove {
    0% {
        -webkit-transform: translate(110%, 0);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}

@-ms-keyframes rightMove {
    0% {
        -ms-transform: translate(110%, 0);
    }
    100% {
        -ms-transform: translate(0, 0);
    }
}

@keyframes rightMove {
    0% {
        -webkit-transform: translate(110%, 0);
        -ms-transform: translate(110%, 0);
        transform: translate(110%, 0);
    }
    100% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

TabItems.vue

<template>
    <div class="tabItems">
        <div class="Tab_tittle_wrap" @click="tabswitch">
            <span v-for="(v,i) in tabTitle" :style="{(100/tabTitle.length-7.5)+'%'}" :class="isShowTab==i?'router-link-active':''">{{v}}<i></i></span>
        </div>
        <div class="Tab_item_wrap">
            <slot></slot>
        </div>
    </div>
</template>

<style lang="less">
    @import "./less/index";
</style>
<script>
    export default {
        data() {
            return {
                tabTitle: [],
                isShowTab: 0,
            }
        },
        created: function() {
            let is = sessionStorage.getItem("isTabShow");
            if(is) {
                this.isShowTab = is;
            } else {
                let URL = libUtils.GetURLParamObj();
                this.isShowTab = URL.isShowTab ? URL.isShowTab : "0";
            }

            setTimeout(function() {
                this.tabswitch(document.querySelector(".Tab_tittle_wrap").children[this.isShowTab].click());
            }.bind(this), 0);
        },
        mounted() {
            let slot = this.$slots.default;
            for(let i = 0; i < slot.length; i++) {
                if(slot[i].tag == "div") {
                    this.tabTitle.push(slot[i].data.attrs.name);
                    if(slot[i].elm) {
                        slot[i].elm.className = "hide";
                        if(this.isShowTab == i) {
                            slot[i].elm.className = "";
                        }
                    };
                }
            }
        },
        methods: {
            tabswitch() {
                if(!event) return;
                let target = event.target;

                if(target.nodeName.toLowerCase() !== 'span') {
                    return;
                }

                let len = target.parentNode.children;
                for(let i = 0; i < len.length; i++) {
                    len[i].index = i;
                    len[i].removeAttribute('class');
                }
                target.setAttribute('class', 'router-link-active');
                this.isShowTab = target.index;

                //tabItems
                let child = this.$el.children[1].children;
                for(let k = 0; k < child.length; k++) {
                    child[k].className = "hide";
                    if(k == target.index) {
                        child[k].className = "showAnminous";
                    }
                }
                try {
                    sessionStorage.setItem("isTabShow", target.index);
                } catch(err) {
                    console.log(err);
                }
            }
        }
    }
</script>

PS：

created、mounted这两个方法不需要过多介绍，Vue生命周期

1、created方法介绍。

获取浏览器链接地址：libUtils.GetURLParamObj();获取浏览器链接地址的，如果不知道怎么获取，在这里

created这个方法主要是用来定位tab具体显示哪个页面的

2、mounted方法介绍

主要是用于隐藏内容容器的

3、tabswitch方法

用来切换组件容器的显示的页面！

转载 原文地址：http://blog.csdn.net/qq_16559905/article/details/73496926