多种element-ui标签选项卡插件

多种基于element-ui标签选项卡插件，vue选项卡插件制作的标签选项卡代码，支持水平垂直选项卡切换效果。

js代码
<scripttype="text/javascript"src="js/vue.min.js"></script>
<scriptsrc="js/element.min.js"></script>
<scripttype="text/javascript">
newVue({
el:'#myVue',
data(){
return{
activeName:'second',
activeName2:'first',
tabPosition:'top',
editableTabsValue2:'2',
editableTabs2:[{
title:'Tab1',
name:'1',
content:'Tab1content'
},{
title:'Tab2',
name:'2',
content:'Tab2content'
}],
tabIndex:2
}
},
methods:{
handleClick(tab,event){
console.log(tab,event);
},
addTab(targetName){
letnewTabName=++this.tabIndex+'';
this.editableTabs2.push({
title:'NewTab',
name:newTabName,
content:'NewTabcontent'
});
this.editableTabsValue2=newTabName;
},
removeTab(targetName){
lettabs=this.editableTabs2;
letactiveName=this.editableTabsValue2;
if(activeName===targetName){
tabs.forEach((tab,index)=>{
if(tab.name===targetName){
letnextTab=tabs[index+1]||tabs[index-1];
if(nextTab){
activeName=nextTab.name;
}
}
});
}this.editableTabsValue2=activeName;
this.editableTabs2=tabs.filter(tab=>tab.name!==targetName);
}
}
})
</script>



下载

2023-11-22 22:28 上传

点击文件名下载附件