Vue2.0 多 Tab切換組件的封裝實(shí)例

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:33:57

Vue2.0 多 Tab切換組件的封裝實(shí)例

Vue2.0 多 Tab切換組件的封裝實(shí)例:Vue2.0 多 Tab切換組件簡(jiǎn)單封裝，滿(mǎn)足自己簡(jiǎn)單的功能，可以直接拿去使用！首先上效果圖：功能簡(jiǎn)單介紹： 1、支持tab切換 2、支持tab定位 3、支持tab自動(dòng)化仿React多Tab實(shí)現(xiàn)，總之可以正常使用滿(mǎn)足日常需求， 1、使用方法： ==index.vue文件=

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Vue2.0 多 Tab切換組件的封裝實(shí)例:Vue2.0 多 Tab切換組件簡(jiǎn)單封裝，滿(mǎn)足自己簡(jiǎn)單的功能，可以直接拿去使用！首先上效果圖：功能簡(jiǎn)單介紹： 1、支持tab切換 2、支持tab定位 3、支持tab自動(dòng)化仿React多Tab實(shí)現(xiàn)，總之可以正常使用滿(mǎn)足日常需求， 1、使用方法： ==index.vue文件=

Vue2.0 多 Tab切換組件簡(jiǎn)單封裝，滿(mǎn)足自己簡(jiǎn)單的功能，可以直接拿去使用！

首先上效果圖：

功能簡(jiǎn)單介紹：

1、支持tab切換

2、支持tab定位

3、支持tab自動(dòng)化

仿React多Tab實(shí)現(xiàn)，總之可以正常使用滿(mǎn)足日常需求，

1、使用方法：

==index.vue文件==

<TabItems>
 <div name="買(mǎi)入" class="first">
 <Content :isContTab = "0" />
 </div>
 <div name="自動(dòng)再平衡" class="second">
 <Content :isContTab = "1" />
 </div>
 <div name="一鍵賣(mài)出" class="three">
 <Content :isContTab = "2" />
 </div>
</TabItems>

PS：TabItems是我的TabSwitch組件，tab頁(yè)面標(biāo)題就是 div 中的name值，倆面是內(nèi)容，也可以是子組件。

接下來(lái)展示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";
 /*動(dòng)畫(huà)名稱(chēng)，需要跟@keyframes定義的名稱(chēng)一致*/
 -webkit-animation-duration: .3s;
 /*動(dòng)畫(huà)持續(xù)的時(shí)間長(zhǎng)*/
 -webkit-animation-iteration-count: 1;
 /*動(dòng)畫(huà)循環(huán)播放的次數(shù)為1 infinite為無(wú)限次*/
 }
}

@-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這兩個(gè)方法不需要過(guò)多介紹，Vue生命周期

1、created方法介紹。

獲取瀏覽器鏈接地址：libUtils.GetURLParamObj();獲取瀏覽器鏈接地址的

created這個(gè)方法主要是用來(lái)定位tab具體顯示哪個(gè)頁(yè)面的

2、mounted方法介紹

主要是用于隱藏內(nèi)容容器的

3、tabswitch方法

用來(lái)切換組件容器的顯示的頁(yè)面！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com