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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
web打印小结
Jan 11 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
Vue快速实现通用表单验证的示例代码
Jan 09 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
桌面中心(二)数据库写入
2006/10/09 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python多进程fork()函数详解
2019/02/22 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
python利用platform模块获取系统信息
2020/10/09 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
网络工程师专家职业发展路线
2014/02/14 职场文书
2014年党建工作总结
2014/11/11 职场文书
婚内分居协议书范文
2014/11/26 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
矛盾论读书笔记
2015/06/29 职场文书
银行求职信怎么写
2019/06/20 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL