溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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" : :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方法
用來切換組件容器的顯示的頁面！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
