大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
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方法
用来切换组件容器的显示的页面!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。