Vue2.0 多 Tab切换组件的封装介绍

本篇文章主要介绍了vue2.0 多 tab切换组件的封装实例，内容挺不错的，现在分享给大家，也给大家做个参考。

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

首先上效果图：

功能简单介绍：

1、支持tab切换

立即学习“前端免费学习笔记（深入）”；

2、支持tab定位

3、支持tab自动化

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

1、使用方法：

==index.vue文件==

PS：TabItems是我的TabSwitch组件，tab页面标题就是 p 中的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

jquery插件库合集

pui 是一款基于jQyery开发的插件库。目前线上稳定使用已有2年多，丰富的接口，简单明了的调用方式，灵活的回调函数，让您轻轻松松打造出富有灵活交互的Web前端界面解决方案。 插件库封装了布局、表单元素、表单校验、弹窗、toast、气泡pop、tab切换、日历时间、分页、表格、树、css命名等功能

下载

PS：

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

1、created方法介绍。

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

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

2、mounted方法介绍

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

3、tabswitch方法

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于Vue拖拽组件的开发介绍

Vue添加请求拦截器及vue-resource 拦截器的使用