Vue2.0 多 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="{width:(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方法

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

---