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


Posted in Javascript onJuly 28, 2017

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

首先上效果图:

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

功能简单介绍:

1、支持tab切换

2、支持tab定位

3、支持tab自动化

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

1、使用方法:

==index.vue文件==

<TabItems>
  <div name="买入" class="first">
    <Content :isContTab = "0" />
  </div>
  <div name="自动再平衡" class="second">
    <Content :isContTab = "1" />
  </div>
  <div name="一键卖出" class="three">
    <Content :isContTab = "2" />
  </div>
</TabItems>

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

<template>
  <div class="tabItems">
    <div class="Tab_tittle_wrap" @click="tabswitch">
      <span v-for="(v,i) in tabTitle" :style="{width:(100/tabTitle.length-7.5)+'%'}" :class="isShowTab==i?'router-link-active':''">{{v}}<i></i></span>
    </div>
    <div class="Tab_item_wrap">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="less">
  @import "./less/index";
</style>
<script>
  export default {
    data() {
      return {
        tabTitle: [],
        isShowTab: 0,
      }
    },
    created: function() {
      let is = sessionStorage.getItem("isTabShow");
      if(is) {
        this.isShowTab = is;
      } else {
        let URL = libUtils.GetURLParamObj();
        this.isShowTab = URL.isShowTab ? URL.isShowTab : "0";
      }

      setTimeout(function() {
        this.tabswitch(document.querySelector(".Tab_tittle_wrap").children[this.isShowTab].click());
      }.bind(this), 0);
    },
    mounted() {
      let slot = this.$slots.default;
      for(let i = 0; i < slot.length; i++) {
        if(slot[i].tag == "div") {
          this.tabTitle.push(slot[i].data.attrs.name);
          if(slot[i].elm) {
            slot[i].elm.className = "hide";
            if(this.isShowTab == i) {
              slot[i].elm.className = "";
            }
          };
        }
      }
    },
    methods: {
      tabswitch() {
        if(!event) return;
        let target = event.target;

        if(target.nodeName.toLowerCase() !== 'span') {
          return;
        }

        let len = target.parentNode.children;
        for(let i = 0; i < len.length; i++) {
          len[i].index = i;
          len[i].removeAttribute('class');
        }
        target.setAttribute('class', 'router-link-active');
        this.isShowTab = target.index;

        //tabItems
        let child = this.$el.children[1].children;
        for(let k = 0; k < child.length; k++) {
          child[k].className = "hide";
          if(k == target.index) {
            child[k].className = "showAnminous";
          }
        }
        try {
          sessionStorage.setItem("isTabShow", target.index);
        } catch(err) {
          console.log(err);
        }
      }
    }
  }
</script>

PS:

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

1、created方法介绍。

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

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

2、mounted方法介绍

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

3、tabswitch方法

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js控制frameSet示例
Sep 10 Javascript
javascript二维数组转置实例
Jan 22 Javascript
Jquery中map函数的用法
Jun 03 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 #Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 #Javascript
解决React Native端口号修改的方法
Jul 28 #Javascript
vue+vux实现移动端文件上传样式
Jul 28 #Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 #Javascript
vue使用vue-cli快速创建工程
Jul 28 #Javascript
用JS实现简单的登录验证功能
Jul 28 #Javascript
You might like
基于pear auth实现登录验证
2010/02/26 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
浅析JavaScript动画
2015/06/10 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
基于node实现websocket协议
2016/04/25 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
社区健康教育实施方案
2014/03/18 职场文书
教师节演讲稿
2014/05/06 职场文书
家长学校工作方案
2014/05/07 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
导游词之无锡唐城
2019/12/12 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL