|
Title: how to use vue-router router-view tag and Tabs component Post by: fengdie on August 17, 2018, 07:07:20 PM View the examples in the attachment image
this example use vue-router plugins,click SideMenu,open new tabs. Title: Re: how to use vue-router router-view tag and Tabs component Post by: jarry on August 19, 2018, 01:08:50 AM Your Tabs component can be defined as:
Code: <div class="main-body f-full f-column"> When click on a menu, create a new TabPanel component.<Tabs ref="tabs" class="f-full" @tabClose="onTabClose($event)"> <TabPanel title="Home"></TabPanel> <TabPanel v-for="p in panels" :title="p.title" :closable="true" :key="p.title" bodyCls="f-column"> <component :is="p.component" class="f-full"></component> </TabPanel> </Tabs> </div> Code: onItemClick(item) { let index = this.panels.findIndex(p => {return p.title == item.text}); if (index >= 0){ this.$refs.tabs.select(index+1); return; } this.panels.push({ title: item.text, component: item.component }); this.$nextTick(() => { this.$refs.tabs.select(this.panels.length); }) }, onTabClose(panel){ this.panels = this.panels.filter(p => p.title != panel.title); } |