Tab切换组件的封装实例

永利402com官方网站

Vue2.0 多 Tab切换组件轻易包装,满足自个儿大致的功用,能够一向拿去采用!

Vue贰.0 多 Tab切换组件的卷入实例,vue二.0tab

Vue2.0 多 Tab切换组件简单包装,满意本人不难的效益,可以向来拿去行使!

首先上效益图:

图片 1

效果简要介绍:

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">
      {{v}}<i></i>
    </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生命周期

一、created方法介绍。

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

created那个法子首借使用来恒定tab具体呈现哪个页面包车型大巴

二、mounted方法介绍

要害是用以隐藏内容容器的

3、tabswitch方法

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

如上正是本文的全体内容,希望对大家的学习抱有帮助,也希望大家多多帮衬帮客之家。

多 Tab切换组件的卷入实例,vue二.0tab Vue②.0
多 Tab切换组件轻便包装,满足本身大致的效应,能够直接拿去选用!
首先上效果图: 作用简…

先是上效果图:

图片 2

职能简介:

1、支持tab切换

2、支持tab定位

3、支持tab自动化

仿React多Tab达成,显而易见能够健康使用满意普通需要,

一、使用方式:

==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">
      {{v}}<i></i>
    </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生命周期

一、created方法介绍。

获取浏览器链接地址:libUtils.GetU瑞鹰LParamObj();获取浏览器链接地址的

created那个方法主若是用来恒定tab具体显示哪个页面包车型客车

二、mounted方法介绍

驷不如舌是用以隐藏内容容器的

3、tabswitch方法

用来切换组件容器的展现的页面!

如上正是本文的全体内容,希望对大家的就学抱有扶助,也指望我们多多协助脚本之家。

你也许感兴趣的作品:

  • 详解vue二.0 使用动态组件完结 Tab
    标签页切换效果(vue-cli)
  • vue中用动态组件达成选项卡切换效果
  • vue动态组件达成选项卡切换效果
  • Vue.js组件tab达成选项卡切换
  • Vue.js组件tabs达成选项卡切换效果
  • Vue达成内部零件轮播切换效果的演示代码

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图