Vue2.0 多 Tab切换组件的封装实例

Vue2.0 多 Tab切换组件的封装实例

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

首先上效果图：

功能简单介绍：

1、支持tab切换

2、支持tab定位

3、支持tab自动化

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

1、使用方法：

==index.vue文件==

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-animatioWNalkNOLzn-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 righttp://htMove {

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

{{v}}

PS：

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

1、created方法介绍。

获取浏览器链接地址：libUtils.GetURLParamObj();获取浏览器链接地址的

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

2、mounted方法介绍

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

3、tabswitch方法

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。