使用VUE搭建tab标签组件
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:;} * {
opacity:;
-webkit-backface-visibility: hidden;
} .tabItems {
.Tab_tittle_wrap {
position: absolute;
width: 100%;
top:;
z-index:;
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:;
background: @ffffff;
bottom:;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.showAnminous {
opacity:;
-webkit-backface-visibility: hidden;
-webkit-animation-name: "rightMove";
/*动画名称,需要跟@keyframes定义的名称一致*/
-webkit-animation-duration: .3s;
/*动画持续的时间长*/
-webkit-animation-iteration-count:;
/*动画循环播放的次数为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?'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:
created、mounted这两个方法不需要过多介绍,Vue生命周期
1、created方法介绍。
获取浏览器链接地址:libUtils.GetURLParamObj();获取浏览器链接地址的,如果不知道怎么获取,在这里
created这个方法主要是用来定位tab具体显示哪个页面的
2、mounted方法介绍
主要是用于隐藏内容容器的
3、tabswitch方法
用来切换组件容器的显示的页面!
转载 原文地址:http://blog.csdn.net/qq_16559905/article/details/73496926
使用VUE搭建tab标签组件的更多相关文章
- React Native 系列(九) -- Tab标签组件
前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...
- 基于Vue搭建自己的组件库(1)
本项目演示地址:https://husilang.github.io/zm-ui 项目参考文章:从零开始搭建Vue组件库 VV-UI 项目的初衷是学习怎么封装一个基于Vue的UI组件库,顺便记录每个步 ...
- 基于Vue开发的tab切换组件
github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
- vue之slot,组件标签嵌套
vue之slot,组件标签嵌套 插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的. <el-col > <el-checkbox & ...
- Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换
一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...
- new Vue() 和 export default {}及Vue页面组件和标签组件说明与比较(非常重要)
说明与比较:new Vue() 和 export default {} (1)vue就是一个构造函数 (2)vue标签组件:是HTML标签的扩展https://www.cnblogs.com/w-wa ...
- 使用vue实现tab操作
在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').fin ...
随机推荐
- hdu1693
题解: 还是插头dp 代码: #include<cstdio> #include<cstring> #include<algorithm> #include< ...
- zookeeper集群环境搭建(使用kafka的zookeeper搭建zk集群)
---恢复内容开始--- 使用kafka的zookeeper来搞集群的话和单纯用zk的其实差不了多少. 0.说在前头,搭建kafka集群之前请把每个服务器的jdk搞起来. 1.安装kafka wget ...
- SignalR NuGet程序包
最近公司有一个边看直播边聊天的需求,直播好搞,直接用腾讯的小直播,组装推流和播放地址,把推流地址拿出去就OK,只要一推流,就可以使用播放地址观看直播,看完后通过webclient去异步下载直播的视频到 ...
- 微信小程序图表插件 - wx-charts
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx-c ...
- 7.1 C++模板基本概念及语法 《C++模板与标准模板库》
参考:http://www.weixueyuan.net/view/6398.html 总结: 模板是另一种代码重用机制. 需要设计的几个类,其功能都是一样的,仅仅只是需要操作的数据类型不同. 有更好 ...
- tomcat的安装及配置
1.首先进tomcat官网下载zip压缩文件:http://tomcat.apache.org/download-90.cgi 2.解压缩到指定文件压(后面配置环境变量会用到) 3.配置环境变量 4. ...
- byte[]->new String(byte[]) -> getByte()引发的不一致问题
今天接短信接口,短信接口提供了sdk,我们可以直接用sdk发送请求然后发送对应短信. 但是想使用我们平台自定义的httpUtil实现. 然而忙了1天半,才解决这个问题,还是我同事帮忙找出问题并解决的. ...
- 項目当中使用的easyui的模板crud页面
1.简单的增删改查页面: 第一步骤:html原型型编写,写法参照了easyui demo中form有关html等 <!DOCTYPE html> <html> <head ...
- ssh 免密登陆
A 要免密码登录要B 那么需要在A电脑上使用命令 ssh-keygen -t rsa 在~/.ssh/ 目录下生成id_rsa.pub 这个文件,然后将这个文件的内容拷到B电脑de ~/.ssh/au ...
- ubuntu 更改hostname, hosts后没有办法执行sudo 问题
由于主机名有重复的情况,所有需要更改主机名,遇到几个问题,主机名更改,重启系统以后不能执行sudo,另外也不知道root用户名密码.这个时候陷入了死循环. 网上搜集的办法,都是用sudo 命令去更改, ...