Vue2.0 多 Tab切換組件的封裝實例

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

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);
 }
}

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