The encapsulation instance of Vue2.0 multi-Tab switching component, vue2.0tab

The encapsulation instance of Vue2.0 multi-Tab switching component, vue2.0tab

The Vue2.0 multi-Tab switching component is simple and can be used directly for its own simple functions!

First:

Function introduction:

1. Supports tab switching

2. Support tab Positioning

3. Support for tab Automation

The React-like multi-Tab implementation can be used normally to meet daily needs,

1. Usage:

= Index. vue file =

<TabItems> <div name = "" class = "first"> <Content: isContTab = "0"/> </div> <div name = "auto rebalancing" class = "second"> <Content: isContTab = "1"/> </div> <div name = "one-click selling" class = "three"> <Content: isContTab = "2"/> </div> </TabItems>

PS: TabItems is my TabSwitch component. The tab page title is the name value in the div. The two sides are the content or child components.

Next, the TabItems component is displayed.

2. Components

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: @ dddddddd ;}&: 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";/* animation name, it must be consistent with the name defined by @ keyframes */-webkit-animation-duration :. 3 s;/* animation duration */-webkit-animation-iteration-count: 1; /* The number of animation loop playback times is 1 infinite is unlimited */} @-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:

The created and mounted methods do not need to be described too much.

1. created Method Introduction.

Obtain the URL of the browser: libUtils. GetURLParamObj (); obtain the URL of the browser

The created method is mainly used to locate the page on which the tab is displayed.

2. Introduction to mounted

It is mainly used to hide the content container

3. tabswitch Method

Used to switch the display page of the component container!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.