Vue2.0 多 Tab切换组件简单封装,满足自己简单的功能,可以直接拿去使用!
首先上效果图:
功能简单介绍:
1、支持tab切换
2、支持tab定位
3、支持tab自动化
仿React多Tab实现,总之可以正常使用满足日常需求,
1、使用方法:
==index.vue文件==
<TabItems> <div name="买入" class="first"> <Content :isContTab = "0" /> </div> <div name="自动再平衡" class="second"> <Content :isContTab = "1" /> </div> <div name="一键卖出" class="three"> <Content :isContTab = "2" /> </div> </TabItems>
PS:TabItems是我的TabSwitch组件,tab页面标题就是 div 中的name值,俩面是内容,也可以是子组件。
接下来展示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> <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">{{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 "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:
created、mounted这两个方法不需要过多介绍,Vue生命周期
1、created方法介绍。
获取浏览器链接地址:libUtils.GetURLParamObj();获取浏览器链接地址的
created这个方法主要是用来定位tab具体显示哪个页面的
2、mounted方法介绍
主要是用于隐藏内容容器的
3、tabswitch方法
用来切换组件容器的显示的页面!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]
- 《汽车发烧音乐精选CD18》[FLAC+CUE][7.1G]
- 郑希怡.2004-Perfect.Date【英皇娱乐】【FLAC分轨】
- 群星.1994-宝丽金超级孖宝2CD【宝丽金】【WAV+CUE】
- 林忆莲.2019-0(2023精装版)【环球】【WAV+CUE】
- Supper.Moment.2016-The.Moment【寰亚】【FLAC分轨】
- 范莉丝.1979-送郎一朵牵牛花(LP版)【大联机构】【WAV+CUE】
- 刘宇.2024-宇宙诗人【哔哟哔哟文化】【FLAC分轨】
- 《全景声白噪音》沉浸式大自然助眠 带你听自然的声音[mp3]
- 纯音入心系列纯音乐《古筝精选 十指弹一赏心曲一心奏出世人心》1CD[MP3][582MB]