Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in die Kapselung der Vue2.0-Multi-Tab-Switching-Komponente

不言
Freigeben: 2018-06-30 17:16:54
Original
2409 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Kapselungsbeispiel der Vue2.0-Multi-Tab-Switching-Komponente vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Vue2.0 Multi-Tab-Switching-Komponente wird einfach gekapselt, um ihre einfachen Funktionen zu erfüllen, und kann direkt verwendet werden!

Hier zunächst die Darstellungen:

Eine kurze Einführung in die Funktion:

1 . Tab-Wechsel unterstützen

2. Tab-Positionierung unterstützen

Imitieren Sie die React-Multi-Tab-Implementierung, kurz gesagt, es kann normal verwendet werden, um sich täglich zu treffen Bedürfnisse,

1. Gebrauchsanweisung:

==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>
Nach dem Login kopieren

PS: TabItems ist meine TabSwitch-Komponente, Tab-Seite. Der Titel ist der Namenswert in p, und die beiden Seiten sind der Inhalt, der auch eine Unterkomponente sein kann.

Als nächstes wird die TabItems-Komponente angezeigt

2. Komponente

index.less-Datei

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);
  }
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

PS:

Die beiden Methoden erstellt und gemountet sind nicht erforderlich Zu viel Einführung, Vue-Lebenszyklus

1. Einführung in die erstellte Methode.

Browser-Link-Adresse abrufen: libUtils.GetURLParamObj(); Browser-Link-Adresse abrufen

erstellt Diese Methode wird hauptsächlich verwendet, um herauszufinden, welche Seite auf der Registerkarte speziell angezeigt wird

2. Einführung in die Mount-Methode

wird hauptsächlich zum Ausblenden von Inhaltscontainern verwendet

3 Seite zum Umschalten der Anzeige des Komponentencontainers!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in die Entwicklung von Vue-Drag-and-Drop-Komponenten

Vue fügt Request Interceptor und Vue hinzu- Ressource Einsatz von Abfangjägern


Das obige ist der detaillierte Inhalt vonEinführung in die Kapselung der Vue2.0-Multi-Tab-Switching-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage