多种基于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>
暂无评论内容