Vue2.0 멀티탭 전환 구성요소의 캡슐화 소개

이 글은 주로 Vue2.0 멀티탭 스위칭 컴포넌트의 캡슐화 예시를 소개하고 있습니다. 내용이 꽤 괜찮아서 참고용으로 올려보겠습니다.

Vue2.0 멀티탭 스위칭 컴포넌트는 간단한 기능에 맞게 간단히 캡슐화되어 바로 사용이 가능합니다!

먼저 렌더링은 다음과 같습니다.

기능에 대한 간략한 소개:

1. 탭 전환 지원

2. 탭 자동화 지원

3. 간단히 말해 멀티 탭 구현이 가능합니다. 일상적인 요구 사항을 충족하는 데 사용하세요.

==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는 내 TabSwitch입니다. 구성 요소이며 탭 페이지 제목은 p의 이름 값입니다. 양면은 하위 구성 요소일 수도 있는 콘텐츠입니다.

다음으로 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>
  <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:

두 가지 메소드가 생성되어 마운트되었습니다. 길게 설명할 필요 없이 Vue lifecycle

1. 생성된 메소드를 소개합니다.

브라우저 링크 주소 가져오기: libUtils.GetURLParamObj(); 브라우저 링크 주소 가져오기

생성됨 이 방법은 주로 탭에 표시되는 페이지를 찾는 데 사용됩니다.

2 마운트된 방법 소개

주로 사용됩니다.

3 콘텐츠 컨테이너를 숨기기 위한 것입니다. tabswitch 메서드

는 구성 요소 컨테이너의 표시된 페이지를 전환하는 데 사용됩니다!

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! 관련 권장 사항:

Vue 드래그 앤 드롭 구성 요소 개발 소개

Vue에 요청 인터셉터 추가 및 vue-resource 인터셉터 사용

위 내용은 Vue2.0 멀티탭 전환 구성요소의 캡슐화 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!