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 相关文章推荐
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
vue登录路由验证的实现
Dec 13 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
Python SQLite3数据库操作类分享
2014/06/10 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python nmap实现端口扫描器教程
2020/05/28 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
Python中的Cookie模块如何使用
2020/06/04 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
早读迟到检讨书
2014/01/24 职场文书
加拿大留学自荐信
2014/01/28 职场文书
行政求职信
2014/07/04 职场文书
2014年党务工作总结
2014/11/25 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
大学军训心得体会800字
2016/01/11 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
阿里云日志过滤器配置日志服务
2022/04/09 Servers