上期我们分享了可移动模态框的原理，并实现了一个简单的可拖动模态框，本期我们将基于vue.js实现可以进行动态增加、关闭的tab，顺便简单弄了一个后台框架，还是先看效果吧，懒得弄GIF图了，别嫌弃啊。
还是老规矩，讲讲实现思路吧
相比jQuery，vue.js的数据绑定简直不要太好用，只要数据变化，视图就自动更新。本次我们就利用vue.js的这个特性来实现动态tab。对vue.js不熟悉的朋友可以参考官方教程（https://cn.vuejs.org/v2/guide/）
原理：用一个数组存储当前所有的tab数据，只显示当前tab，其他设置为隐藏。
主要操作：增加、切换、关闭（可配置为不能关闭）
- 用ul实现tab标题,设置ul的css规则为list-style: none;
- tab内容我这里是用iframe加载不用的页面，，这里也可以根据需要换成其他
- 点击左侧导航增加tab，如果tab已经存在则切换状态
- 点击关闭时将tab从tabs中移除
额、、不好表达，看代码吧
css部分：
html部分：
左边的导航栏
tab部分
javascript部分：
var app = new Vue({
el: '#app',
data: {
tabs:[],存储当前所有可用tab
current:-1,当前tabid的初值
datas:[{id:1,tabname:"爱奇艺",isActive:true,url:"https://vip.iqiyi.com",colseAble:true},{id:2,tabname:"腾讯视频",isActive:true,url:"https://v.qq.com/",colseAble:true},{id:3,tabname:"优酷网",isActive:true,url:"http://www.youku.com/",colseAble:true}],所有tab数据
},
mounted: function(){
this.init();
},
methods:{
init:function(){
var tab={id:0,tabname:"百度",isActive:true,url:"https://www.baidu.com",colseAble:false};
this.current=0;
页面加载完成时显示一个不可关闭的tab
},
增加tab，如果已经存在则切换状态为可见
addTab:function(e){
id=e.target.id;
var exist=false;
if (id!=this.current) {
for (var i = 0; i < this.tabs.length; i++) {
if (id==this.tabs[i].id) {
exist=true;
}
}
if(!exist){
for (var i = 0; i < this.datas.length; i++) {
if(id==this.datas[i].id){
this.tabs.push(this.datas[i]);
break;
}
}
}
this.current=id;
}
},
changeTab:function(e){
id=e.target.id;
if (id!=this.current) {
this.current=id;
}
},
closeTab:function(e){
id=e.target.id;
index=0;
currentindex=0;
for (var i = 0; i < this.tabs.length; i++) {
if(this.tabs[i].id==id){
index=i;
}
if (this.tabs[i].id==this.current) {
currentindex=i;
}
}
this.tabs.splice(index,1);
if (index==currentindex) {
if (currentindex==(this.tabs.length)) {
id=this.tabs[index-1].id;
this.current=id;
}else{
this.current=this.tabs[index].id;
}
}
}
},
watch:{
current: function (newvalue,oldvalue) {
if (newvalue!=oldvalue) {
for (var i = 0; i < this.tabs.length; i++) {
if(this.tabs[i].id==oldvalue){
this.tabs[i].isActive=false;
}
if(this.tabs[i].id==newvalue){
this.tabs[i].isActive=true;
}
}
}
}
}
偷了很多懒，没做成vue组件，借用了layui.css的一些样式。
我们是小猿工作室，一群执着于技术的年轻人，欢迎收藏转发哦，喜欢我们的分享就点击关注我们吧。