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方法

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