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 相关文章推荐
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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中简单的图形处理(经典)
2015/10/26 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
javascript 继承实现方法
2009/08/26 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
物流仓储实习自我鉴定
2013/09/25 职场文书
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
老同学聚会感言
2014/02/23 职场文书
电子专业自荐信
2014/07/01 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
银行催款通知书
2015/04/17 职场文书
南极大冒险观后感
2015/06/05 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android