tabs

src/layout/indexCommon.vue

@@ -61,7 +61,7 @@
               :to="item.path"
               v-for="(item, index) in menuList.data"
               :key="index"
-              @click="clickPath(index, item)"
+              @click.stop="clickPath(index, item)"
               ><div
                 style="position: relative"
                 :class="
@@ -81,7 +81,8 @@
                   v-if="
                     websoctStore.messOne?.fromId &&
                     item.path == '/index' &&
-                    $route.path != item.path&&clickId!==index
+                    $route.path != item.path &&
+                    clickId !== index
                   "
                 ></span>
               </div> </router-link
@@ -89,6 +90,28 @@
           </div>
         </el-aside>
         <el-main class="main">
+          <div class="tab_box">
+            <el-tabs
+              v-model="editableTabsValue"
+              type="card"
+              class="demo-tabs"
+              @tab-remove="removeTab"
+            >
+              <el-tab-pane
+                v-for="item in editableTabs"
+                :key="item.path"
+                :label="item.label"
+                :name="item.path"
+              >
+                <template #label>
+                  <div class="tab_pane">
+                    <div class="tab_text">{{ item.title }}</div>
+                    <img src="@/assets/images/close.png" alt="" />
+                  </div>
+                </template>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
           <router-view v-if="isAlive"></router-view>
         </el-main>
       </el-container>
@@ -127,6 +150,7 @@ import { AppMain, Navbar, Settings, TagsView } from "./components";
 import { flieSearch } from "@/api/search/search.js";
 import { useRouter, useRoute } from "vue-router";
 import useWebsoctStore from "@/store/modules/websocket";
+import { toRaw } from "@vue/reactivity";
 const websoctStore = useWebsoctStore();
 const router = useRouter(); //注册路由
 const route = useRoute();
@@ -135,8 +159,31 @@ const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 const searchText = ref(""); //搜索ipt的值
 const selectValue = ref(1); //文档空间类型
-const wangzhi=import.meta.env.VITE_APP_BASE_API
+const wangzhi = import.meta.env.VITE_APP_BASE_API;
 const isAlive = ref(true);
+//--------tabs-----------------
+let tabIndex = 2;
+const editableTabsValue = ref("2");
+const editableTabs = ref([]);
+
+const removeTab = (targetName) => {
+  const tabs = editableTabs.value;
+  let activeName = editableTabsValue.value;
+  if (activeName === targetName) {
+    tabs.forEach((tab, index) => {
+      if (tab.name === targetName) {
+        const nextTab = tabs[index + 1] || tabs[index - 1];
+        if (nextTab) {
+          activeName = nextTab.name;
+        }
+      }
+    });
+  }
+
+  editableTabsValue.value = activeName;
+  editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
+};
+//-------------------------
 
 function reload() {
   isAlive.value = false;
@@ -191,8 +238,8 @@ const toSearch = async () => {
     keyword: searchText.value,
     isAsc: "asc",
     orderByColumn: "createTime",
-    pageSize:3,
-    pageNum:1
+    pageSize: 3,
+    pageNum: 1,
   };
   const res = await flieSearch(query);
   // console.log("res", res);
@@ -295,7 +342,13 @@ const menuList = reactive({
   ],
 });
 const clickPath = (index, items) => {
-  clickId.value = index;
+  console.log("items", items);
+  // clickId.value = index;
+  console.log("editableTabs", editableTabs.value);
+  const arr = toRaw(editableTabs.value);
+  console.log("arr", arr);
+  editableTabs.value = arr.push({ label: items.label, path: items.path });
+  console.log("editableTabs", editableTabs.value);
 };
 </script>
 
@@ -370,6 +423,38 @@ const clickPath = (index, items) => {
 .main {
   background: #c7cbd8;
 }
+// tabs标签
+.tab_box {
+  width: 100%;
+  height: 32px;
+  border-radius: 4px 4px 4px 4px;
+  background-color: #fff;
+  margin-bottom: 8px;
+  .tab_pane {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    img {
+      margin-left: 8px;
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+:deep(.demo-tabs .el-tabs__item) {
+  height: 32px !important;
+  padding: 0px 8px !important;
+  color: #505870 !important;
+  font-size: 12px !important;
+  line-height: 32px;
+  font-weight: 400 !important;
+}
+// tag选中颜色
+:deep( .demo-tabs .el-tabs__item.is-active) {
+  color: #fff !important;
+  font-weight: normal;
+  background-color: #6f85b5;
+}
 //侧边栏css
 .acitve-img-style {
   background-color: #f5f7f9;