
多种基于element-ui标签选项卡插件,vue选项卡插件制作的标签选项卡代码,支持水平垂直选项卡切换效果。
js代码
<script type=\"text/javascript\" src=\"js/vue.min.js\"></script>
<script src=\"js/element.min.js\"></script>
<script type=\"text/javascript\">
new Vue({
el: \'#myVue\',
data() {
return {
activeName: \'second\',
activeName2: \'first\',
tabPosition: \'top\',
editableTabsValue2: \'2\',
editableTabs2: [{
title: \'Tab 1\',
name: \'1\',
content: \'Tab 1 content\'
}, {
title: \'Tab 2\',
name: \'2\',
content: \'Tab 2 content\'
}],
tabIndex: 2
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
addTab(targetName) {
let newTabName = ++this.tabIndex + \'\';
this.editableTabs2.push({
title: \'New Tab\',
name: newTabName,
content: \'New Tab content\'
});
this.editableTabsValue2 = newTabName;
},
removeTab(targetName) {
let tabs = this.editableTabs2;
let activeName = this.editableTabsValue2;
if(activeName === targetName) {
tabs.forEach((tab, index) => {
if(tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if(nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue2 = activeName;
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
}
}
})
</script>










暂无评论内容