本篇文章主要介紹了Vue2.0 多 Tab切換元件的封裝實例，內容挺不錯的，現在分享給大家，也給大家做個參考。
Vue2.0 多 Tab切換元件簡單封裝，滿足自己簡單的功能，可以直接拿去使用！
首先上效果圖：
功能簡單介紹：
1、支援tab切換
#2、支援tab定位
3、支援tab自動化
仿React多Tab實現，總之可以正常使用滿足日常需求，
1、使用方法：
==index.vue檔==
<TabItems>
<p name="买入" class="first">
<Content :isContTab = "0" />
</p>
<p name="自动再平衡" class="second">
<Content :isContTab = "1" />
</p>
<p name="一键卖出" class="three">
<Content :isContTab = "2" />
</p>
</TabItems>PS：TabItems是我的TabSwitch元件，tab頁面標題就是p 中的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>
<p class="tabItems">
<p 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>
</p>
<p class="Tab_item_wrap">
<slot></slot>
</p>
</p>
</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 == "p") {
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>created、mounted這兩個方法不需要過多介紹，Vue生命週期
1、created方法介紹。取得瀏覽器連結位址：libUtils.GetURLParamObj();取得瀏覽器連結位址的
created這個方法主要是用來定位tab具體顯示哪個頁面的
2、mounted方法介紹主要是用來隱藏內容容器的
3、tabswitch方法用來切換元件容器的顯示的頁面！
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
關於Vue拖曳組件的開發介紹#Vue新增請求攔截器及vue-resource攔截器的使用#
以上是Vue2.0 多 Tab切換元件的封裝介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
