基于Vue开发的tab切换组件
github地址：https://github.com/MengFangui/VueTabSwitch
1、index.html
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>基于Vue开发的标签页组件</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head> <body>
<div id="app" v-cloak>
<!--设置value便于父组件与子组件通信-->
<tabs v-model='value'>
<pane label="标签一" name='1'>
标签一的内容
</pane>
<pane label="标签二" name='2'>
标签二的内容
</pane>
<pane label="标签三" name='3'>
标签三的内容
</pane>
</tabs>
</div> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script src="js/pane.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tabs.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
//初始显示第几个
value: '1'
}
});
</script>
</body> </html>
2、tabs.js
Vue.component('tabs', {
template: `
<div class="tabs">
<div class="tabs-bar">
<!--标题页的标题 v-for遍历, :class 动态绑定class-->
<div :class="tabCls(item)" v-for="(item,index) in navList" @click="handleChange(index)">
{{item.label}}
</div>
</div>
<div class="tabs-content">
<!--这里的slot就是嵌套的pane组件的内容-->
<slot></slot>
</div>
</div>
`,
data: function() {
return {
//将pane的标题保存到数组中
navList: [],
//保存父组件的value到currentValue变量中，以便在本地维护
currentValue: this.value
}
},
props: {
//接收父组件的value
value: {
type: [String]
}
},
methods: {
//使用$children遍历子组件，得到所有的pane组件
getTabs: function() {
return this.$children.filter(function(item) {
return item.$options.name === 'pane';
})
},
//更新tabs
updateNav() {
this.navList = [];
var _this = this;
this.getTabs().forEach(function(pane, index) {
_this.navList.push({
label: pane.label,
name: pane.name || index
});
//如果没有设置name，默认设置为索引值
if(!pane.name) {
pane.name = index;
}
//设置第一个pane为当前显示的tab
if(index === 0) {
if(!_this.currentValue) {
_this.currentValue = pane.name || index;
}
}
});
this.updateStatus();
},
updateStatus() {
var tabs = this.getTabs();
var _this = this;
//显示当前选中的tab对应的pane组件，隐藏没有选中的
tabs.forEach(function(tab) {
return tab.show = tab.name === _this.currentValue;
})
},
tabCls: function(item) {
return [
'tabs-tab',
{
//为当前选中的tab加一个tabs-tab-active class
'tabs-tab-active': item.name === this.currentValue
}
]
},
//点击tab标题触发
handleChange: function(index) {
var nav = this.navList[index];
var name = nav.name;
//改变当前选中的tab，触发watch
this.currentValue = name;
//实现子组件与父组件通信
this.$emit('input', name);
}
},
watch: {
value: function(val) {
this.currentValue = val;
},
currentValue: function() {
//tab发生变化时，更新pane的显示状态
this.updateStatus();
}
}
})
3、pane.js
Vue.component('pane',{
template:`
<div class="pane" v-show="show">
<slot></slot>
</div>
`,
data:function(){
return {
show:true
}
},
//props为来自父组件的变量，实现父组件与子组件通信
props:{
//设置pane的标识
name:{
type:String
},
//label是设置标题
label:{
type:String,
default:''
}
},
methods:{
updateNav:function(){
//$parent 父链，通知父组件（tabs）进行更新。
//说明：在业务中尽可能不要使用$parent来操作父组件，$parent适合标签页这样的独立组件
this.$parent.updateNav();
}
},
//监听label
watch:{
label(){
this.updateNav();
}
},
mounted(){
//初始化tabs
this.updateNav();
}
})
4、style.css
[v-cloak]{
display: none;
}
.tabs{
font-size: 14px;
color: #657180;
}
.tabs-bar:after{
content: '';
display: block;
width: 100%;
height: 1px;
background: #d7dde4;
margin-top:-1px;
}
.tabs-tab{
display: inline-block;
padding: 4px 16px;
margin-right: 6px;
background: #fff;
border: 1px solid #d7dde4;
cursor: pointer;
position: relative;
}
.tabs-tab-active{
color: #3399ff;
border-top: 1px solid #3399ff;
border-bottom: 1px solid #3399ff;
}
.tabs-tab-active:before{
content: '';
display: block;
height: 1px;
background: #3399ff;
position: absolute;
top:;
left:;
right:;
}
.tabs-content{
padding: 8px 0;
}
5、效果：
基于Vue开发的tab切换组件的更多相关文章
- 基于Vue开发的门户网站展示和后台数据管理系统
基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...
- react实现的tab切换组件
我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...
- 发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...
- vue-awesome-swipe 基于vue使用的轮播组件 使用(改)
npm install vue-awesome-swiper --save //基于vue使用的轮播组件 <template> <swiper :options="swi ...
- Vue.js实现tab切换效果
利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...
- vue + element-ui 制作tab切换（切换vue组件，踩坑总结）
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
- vue + element-ui 制作tab切换（适用于单页切换不同标记显示不同内容）
本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...
- 基于VUE开发项目
前言 最近由于公司需要,需要写一个相对来说比较大型的后台管理系统.为了保证管理系统操作体验较为舒适并且项目后期益于维护,最后决定基于VUE全家桶来开发一个高度组件化的单页SPA应用. 技术选型 vue ...
- VBox 一款基于vue开发的音乐盒 序章
己基于vue写了一个 Mplayer, github地址:https://github.com/xiangwenhu/MPlaer, 演示地址:http://babydairy2017.cloudap ...
随机推荐
- java的maven项目（一）
Maven项目管理工具 Svn + eclipse 约等于 maven量级 1 Maven的简介 1.1 什么是maven 是apache下的一个开源项目,是纯java开发,并 ...
- 《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计
第8章 用jQuery打造个性网站 做一个购物网站并用jQuery来完善.大体步骤是: 收集素材 确定网站结构 A. 文件结构,imagea文件夹用来存放将要用到的图片,styles文件夹存放CSS, ...
- Vue cmd命令操作
1.安装node(安装到电脑中,不同项目不需重复安装) 安装nodejs(如果不是在C:则需要配环境变量)2.打开cmd C:创建一个文件夹(名字不要用node) 1.进入该文件夹 2.node -v ...
- MATLAB作图方法与技巧(一)
下面从折线图.曲面图和图形说明与定制三个方面说明MATLAB作图的一些方法与技巧,注意,文中出现的单引号在MATLAB中实际运行的时候,需要改为MATLAB认可的单引号. 一. 作折线图 1.plot ...
- 关于ofbiz加载数据模块的文件参数配置
1,在applications文件夹下新建一个数据模块meetingroom 2, 要让ofbiz加载这个数据模块就需要在applications下的配置文件里修改参数 (1)在application ...
- 牛客网 小白赛4 A三角形【贪心】
[前驱]:在指定长度的棍子中找到能组成最大周长三角形的三根棍子 链接:https://www.nowcoder.com/acm/contest/134/A 来源:牛客网 题目描述 铁子从森林里收集了n ...
- 洛谷——P1088 火星人
P1088 火星人 题目描述 人类终于登上了火星的土地并且见到了神秘的火星人.人类和火星人都无法理解对方的语言,但是我们的科学家发明了一种用数字交流的方法.这种交流方法是这样的,首先,火星人把一个非常 ...
- c++基础学习之string
//学习使用string类 2013-10-18 lingc #include <iostream> #include <string>//include this head ...
- POJ 3709 K-Anonymous Sequence（斜率优化DP）
[题目链接] http://poj.org/problem?id=3709 [题目大意] 给出一个长度为n个非严格单调递增数列,每次操作可以使得其中任意一项减一, 问现在使得数列中每项数相同的数的数量 ...
- 【差分约束系统】【spfa】UVALive - 4885 - Task
差分约束系统讲解看这里:http://blog.csdn.net/xuezhongfenfei/article/details/8685313 模板题,不多说.要注意的一点是!!!对于带有within ...