小程序游戏源码_Vue2.0 多 Tab切换组件的封装实例

Vue2.0 多 Tab切换组件的封装实例       本篇文章主要介绍了Vue2.0 多 Tab切换组件的封装实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

Vue2.0 多 Tab切换组件简单封装,满足自己简单的功能,可以直接拿去使用!

首先上效果图:

功能简单介绍:

1、支持tab切换

2、支持tab定位

3、支持tab自动化

仿React多Tab实现,总之可以正常使用满足日常需求,

1、使用方法:

==index.vue文件==

 TabItems 
 div name="买入" 
 Content :isContTab = "0" / 
 /div 
 div name="自动再平衡" 
 Content :isContTab = "1" / 
 /div 
 div name="一键卖出" 
 Content :isContTab = "2" / 
 /div 
 /TabItems 

凡科抠图: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;
 display: inline-block;
 position: absolute;
 width: 1px;
 height: 50px;
 top: 15px;
 right: -24px;
 background: @dddddd;
 :last-child {
 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";
 /*动画名称,*/
 -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 
 div @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 
 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 

凡科抠图:

created、mounted这两个方法不需要过多介绍,Vue生命周期

1、created方法介绍。

created这个方法主要是用来定位tab具体显示哪个页面的

2、mounted方法介绍

主要是用于隐藏内容容器的

3、tabswitch方法

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读