主页增加tab栏

src/assets/css/main.css

@@ -30,7 +30,7 @@ a {
     padding-bottom: 2px;
     -webkit-transition: left .3s ease-in-out;
     transition: left .3s ease-in-out;
-    background: #f0f0f0;
+    background: #ffffff;
 }
 
 .content {

src/components/NavmenuItem.vue

@@ -15,9 +15,9 @@
 		</template>
 		<template v-for="(sub, index) in item?.subMenus" :key="index">
 			<template v-if="sub.subMenus && sub.subMenus.length > 0">
-			    <navmenu-item :key="sub.menuId" :item="sub"/>
+			    <navmenu-item :key="sub.menuId" :item="sub" @clickMenuItem="clickHandle"/>
 			</template>
-			<el-menu-item :index="sub.menuId"  v-else >
+			<el-menu-item :index="sub.menuId"  v-else  @click="(menucomp)=>{clickHandle(sub)}">
 			   {{ sub?.menuName }}
 			</el-menu-item>
 		</template>

src/pages/Home.vue

@@ -3,12 +3,17 @@
 		<v-header />
 		<v-sidetree />
 		<div class="content-box" :class="{ 'content-collapse': collapse }">
+			<el-tabs type="card" v-model="activeTab" closable class="tabWrap" @tab-remove="removeTabHandle">
+				 <el-tab-pane v-for="(item, index) in menuTabs" :key="item.name" :label="item.title" :name="item.name">
+					<el-icon><User/></el-icon>{{item.content}}
+				 </el-tab-pane>
+			</el-tabs>
 		</div>
 	</div>
 </template>
 
 <script setup>
-	import { computed } from "vue"
+	import { watch,ref } from "vue"
 	
 	import vHeader from "../components/Header.vue"
 	import vSidetree from "../components/Sidetree.vue"
@@ -25,8 +30,64 @@
 	*/
    
    const store=useHomeStore()
-   const  { collapse } = storeToRefs(store)
+   const  { collapse ,currentMenu,menuTabs,activeTab} = storeToRefs(store)
+   
+   /* let origTabs=[{
+	   title: 'Tab 1',
+	   name: '1',
+	   content: 'Tab 1 content',
+   },
+   {
+   	   title: 'Tab 2',
+   	   name: '2',
+   	   content: 'Tab 2 content',
+   }
+   ] */
+   
+  /* const activeTabVal=ref('')
+   const tabs=ref(origTabs)
+   
+   const addTab=(opt) =>{
+	   tabs.value.push({
+		   title: 'Tab 3',
+		   name: '3',
+		   content: 'Tab 3 content',
+	   });
+	   
+	  
+   } */
+   
+   const removeTabHandle=(tabId)=>{
+	   store.closeTab(tabId)
+   }
+   
+   watch(currentMenu,async(newMenu,oldMenu) => {
+	   
+	   /* tabs.value.push({
+	   		   title: newMenu.menuName,
+	   		   name: newMenu.menuId,
+	   		   content: newMenu.menuName
+	   }); */
+	   store.addTab(newMenu)
+   })
 </script>
 
 <style scoped>
+	.tabWrap{
+		height:100%;
+	}
+	.tabWrap:deep(.el-tabs__content){
+		height: calc(100% - 58px);
+	}
+	
+	.content-box:deep(.el-tabs--card>.el-tabs__header .el-tabs__item .is-icon-close){
+		top:-10px !important;
+		right:-10px !important;
+		/* width:14px; */
+		/* visibility: hidden; */
+	}
+	
+	/* .content-box:deep(.el-tabs--card>.el-tabs__header .el-tabs__item:hover){
+		padding:0 20px;
+	} */
 </style>

src/store/home.js

@@ -6,9 +6,34 @@ export const useHomeStore = defineStore('home', {
       collapse: false,
 	  systreeShow:true,
 	  currentTreeNode:null,
-	  currentMenu:null
+	  currentMenu:null,
+	  menuTabs:[],
+	  activeTab:null
     }
   },
   getters:{},
-  actions:{}
+  actions:{
+	  addTab(menu){
+		 if(this.existTab(menu.menuId)){
+			this.activeTab=menu.menuId
+			return
+		 }
+		 this.menuTabs.push({
+			title:menu.menuName,
+			name:menu.menuId,
+			content:menu.menuName
+		 })
+		 this.activeTab=menu.menuId 
+	  },
+	  closeTab(tabId){
+		this.menuTabs=this.menuTabs.filter((item) => item.name!=tabId)
+		if(this.menuTabs.length>0){
+			   this.activeTab=(this.menuTabs)[this.menuTabs.length-1]['name']
+		}
+	  },
+	  existTab(tabId){
+		let existAry=this.menuTabs.filter((item) => item.name ==tabId)
+		return existAry.length>0
+	  }
+  }
 })