Introduction to encapsulation of Vue2.0 multi-Tab switching component

This article mainly introduces the encapsulation example of the Vue2.0 multi-Tab switching component. The content is quite good. I will share it with you now and give it as a reference.

Vue2.0 multi-Tab switching component is simply encapsulated to meet its own simple functions and can be used directly!

First of all, the renderings:

A brief introduction to the function:

1. Support tab switching

2. Support tab positioning

3. Support tab automation

Imitate React multi-Tab implementation. In short, it can be used normally to meet daily needs.

1. Usage:

==index.vue file==

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

PS: TabItems is my TabSwitch component, tab page The title is the name value in p, and the two sides are the content, which can also be a subcomponent.

Next show the TabItems component

2, component

index.less file

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>
  <p class="tabItems">
    <p class="Tab_tittle_wrap" @click="tabswitch">
      <span v-for="(v,i) in tabTitle" :style="{width:(100/tabTitle.length-7.5)+&#39;%&#39;}" :class="isShowTab==i?&#39;router-link-active&#39;:&#39;&#39;">{{v}}<i></i></span>
    </p>
    <p class="Tab_item_wrap">
      <slot></slot>
    </p>
  </p>
</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 == "p") {
          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() !== &#39;span&#39;) {
          return;
        }

        let len = target.parentNode.children;
        for(let i = 0; i < len.length; i++) {
          len[i].index = i;
          len[i].removeAttribute(&#39;class&#39;);
        }
        target.setAttribute(&#39;class&#39;, &#39;router-link-active&#39;);
        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 and mounted are not required for these two methods Too much introduction, Vue life cycle

1, introduction to created method.

Get the browser link address: libUtils.GetURLParamObj(); Get the browser link address

createdThis method is mainly used to locate which page the tab specifically displays

2. Introduction to mounted method

Mainly used to hide content containers

3. Tabswitch method

The page used to switch the display of the component container!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the development of Vue drag and drop components

Vue adds request interceptor and vue-resource Use of interceptors

The above is the detailed content of Introduction to encapsulation of Vue2.0 multi-Tab switching component. For more information, please follow other related articles on the PHP Chinese website!