|
Vue2.0 多 Tab切换组件简单封装，满足自己简单的功能，可以直接拿去使用！
首先上效果图：
功能简单介绍：
1、支持tab切换
2、支持tab定位
3、支持tab自动化
仿React多Tab实现，总之可以正常使用满足日常需求，
1、使用方法：
==index.vue文件==
PS：TabItems是我的TabSwitch组件，tab页面标题就是 div 中的name值，俩面是内容，也可以是子组件。
接下来展示TabItems组件
2、组件
index.less文件
{
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,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);
-ms-transform: translate(0,0);
transform: translate(0,0);
}
}
TabItems.vue
<style lang="less">
@import "./less/index";
PS：
created、mounted这两个方法不需要过多介绍，Vue生命周期
1、created方法介绍。
获取浏览器链接地址：libUtils.GetURLParamObj();获取浏览器链接地址的
created这个方法主要是用来定位tab具体显示哪个页面的
2、mounted方法介绍
主要是用于隐藏内容容器的
3、tabswitch方法
用来切换组件容器的显示的页面！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
