建站
咨询
售后
建站咨询
Vue2.0多Tab切换组件的封装实例
Vue2.0 多 Tab切换组件简单封装，满足自己简单的功能，可以直接拿去使用！
创新互联公司是一家专注于成都网站制作、成都做网站与策划设计,永春网站建设哪家好?创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:永春等地区。永春做网站价格咨询:028-86922220
首先上效果图：
功能简单介绍：
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-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
{{v}}
PS：
created、mounted这两个方法不需要过多介绍，Vue生命周期
1、created方法介绍。
获取浏览器链接地址：libUtils.GetURLParamObj();获取浏览器链接地址的
created这个方法主要是用来定位tab具体显示哪个页面的
2、mounted方法介绍
主要是用于隐藏内容容器的
3、tabswitch方法
用来切换组件容器的显示的页面！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
标题名称：Vue2.0多Tab切换组件的封装实例
分享路径：http://lswzjz.com/article/pejjco.html
