이 글은 주로 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>
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); } }
<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)+'%'}" :class="isShowTab==i?'router-link-active':''">{{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() !== '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:
두 가지 메소드가 생성되어 마운트되었습니다. 길게 설명할 필요 없이 Vue lifecycle
1. 생성된 메소드를 소개합니다.
브라우저 링크 주소 가져오기: libUtils.GetURLParamObj(); 브라우저 링크 주소 가져오기 생성됨 이 방법은 주로 탭에 표시되는 페이지를 찾는 데 사용됩니다.2 마운트된 방법 소개
주로 사용됩니다.3 콘텐츠 컨테이너를 숨기기 위한 것입니다. tabswitch 메서드
는 구성 요소 컨테이너의 표시된 페이지를 전환하는 데 사용됩니다!위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! 관련 권장 사항:
Vue 드래그 앤 드롭 구성 요소 개발 소개
위 내용은 Vue2.0 멀티탭 전환 구성요소의 캡슐화 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!