✨tabsBar支持关闭其他、关闭左侧、关闭右侧、关闭全部

src/layout/vab-tabs/index.vue

@@ -1,29 +1,61 @@
 <template>
   <div class="vab-tabs">
-    <a-tabs
+    <a-row type="flex">
-      @tab-click="handleTabClick"
+      <a-col flex="auto">
-      @edit="handleTabRemove"
+        <a-tabs
-      v-model:activeKey="tabActive"
+          @tab-click="handleTabClick"
-      hide-add
+          @edit="handleTabRemove"
-      type="editable-card"
+          v-model:activeKey="tabActive"
-    >
+          hide-add
-      <a-tab-pane
+          type="editable-card"
-        v-for="item in visitedRoutes"
+        >
-        :key="item.fullPath"
+          <a-tab-pane
-        :closable="!isAffix(item)"
+            v-for="item in visitedRoutes"
-        :tab="item.meta.title"
+            :key="item.fullPath"
-      ></a-tab-pane>
+            :closable="!isAffix(item)"
-    </a-tabs>
+            :tab="item.meta.title"
+          ></a-tab-pane>
+        </a-tabs>
+      </a-col>
+      <a-col flex="88px">
+        <a-dropdown>
+          <template v-slot:overlay>
+            <a-menu @click="handleClick">
+              <a-menu-item key="closeOthersTabs">
+                <a>关闭其他</a>
+              </a-menu-item>
+              <a-menu-item key="closeLeftTabs">
+                <a>关闭左侧</a>
+              </a-menu-item>
+              <a-menu-item key="closeRightTabs">
+                <a>关闭右侧</a>
+              </a-menu-item>
+              <a-menu-item key="closeAllTabs">
+                <a>关闭全部</a>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button style="margin-left: 8px">
+            更多
+            <DownOutlined />
+          </a-button>
+        </a-dropdown>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
 <script>
+  import { DownOutlined } from "@ant-design/icons-vue";
   import { mapActions, mapGetters } from "vuex";
   export default {
     name: "VabTabs",
+    components: {
+      DownOutlined,
+    },
     data() {
       return {
-        affixTags: [],
+        affixTabs: [],
         tabActive: null,
         created: false,
       };
@@ -37,13 +69,13 @@
     watch: {
       $route: {
         handler(route) {
-          this.addTags(route);
+          this.addTabs(route);
         },
       },
     },
     created() {
-      this.initAffixTags(this.routes);
+      this.initAffixTabs(this.routes);
-      this.addTags(this.$route);
+      this.addTabs(this.$route);
     },
     methods: {
       ...mapActions({
@@ -54,13 +86,13 @@
         delRightVisitedRoutes: "tagsBar/delRightVisitedRoutes",
         delAllVisitedRoutes: "tagsBar/delAllVisitedRoutes",
       }),
-      initAffixTags(routes) {
+      initAffixTabs(routes) {
         routes.forEach((route) => {
-          if (route.meta && route.meta.affix) this.addTags(route);
+          if (route.meta && route.meta.affix) this.addTabs(route);
-          if (route.children) this.initAffixTags(route.children);
+          if (route.children) this.initAffixTabs(route.children);
         });
       },
-      async addTags(tag) {
+      async addTabs(tag) {
         if (tag.name && tag.meta && tag.meta.tagHidden !== true) {
           let matched = [tag.name];
           if (tag.matched) matched = tag.matched.map((item) => item.name);
@@ -92,19 +124,19 @@
         await this.delVisitedRoute(view);
         if (this.isActive(view)) this.toLastTag();
       },
-      handleCommand(command) {
+      handleClick({ key }) {
-        switch (command) {
+        switch (key) {
-          case "closeOthersTags":
+          case "closeOthersTabs":
-            this.closeOthersTags();
+            this.closeOthersTabs();
             break;
-          case "closeLeftTags":
+          case "closeLeftTabs":
-            this.closeLeftTags();
+            this.closeLeftTabs();
             break;
-          case "closeRightTags":
+          case "closeRightTabs":
-            this.closeRightTags();
+            this.closeRightTabs();
             break;
-          case "closeAllTags":
+          case "closeAllTabs":
-            this.closeAllTags();
+            this.closeAllTabs();
             break;
         }
       },
@@ -114,36 +146,30 @@
           this.toLastTag();
         }
       },
-      async closeOthersTags() {
+      async closeOthersTabs() {
-        const view = this.toThisTag();
+        await this.delOthersVisitedRoutes(this.toThisTag());
-        await this.delOthersVisitedRoutes(view);
       },
-      async closeLeftTags() {
+      async closeLeftTabs() {
-        const view = this.toThisTag();
+        await this.delLeftVisitedRoutes(this.toThisTag());
-        await this.delLeftVisitedRoutes(view);
       },
-      async closeRightTags() {
+      async closeRightTabs() {
-        const view = this.toThisTag();
+        await this.delRightVisitedRoutes(this.toThisTag());
-        await this.delRightVisitedRoutes(view);
       },
-      async closeAllTags() {
+      async closeAllTabs() {
-        const view = this.toThisTag();
         await this.delAllVisitedRoutes();
-        if (this.affixTags.some((tag) => tag.path === view.path)) return;
+        if (this.affixTabs.some((tag) => tag.path === this.toThisTag().path))
+          return;
         this.toLastTag();
       },
       toLastTag() {
         const latestView = this.visitedRoutes.slice(-1)[0];
-        if (latestView) {
+        if (latestView) this.$router.push(latestView);
-          this.$router.push(latestView);
+        else this.$router.push("/");
-        } else {
-          this.$router.push("/");
-        }
       },
       toThisTag() {
-        const view = this.visitedRoutes.find((item) => {
+        const view = this.visitedRoutes.find(
-          return item.fullPath === this.$route.fullPath;
+          (item) => item.fullPath === this.$route.fullPath
-        });
+        );
         if (this.$route.path !== view.path) this.$router.push(view);
         return view;
       },
@@ -152,8 +178,25 @@
 </script>
 <style lang="less">
   .vab-tabs {
-    .ant-tabs-bar {
+    padding: 0 @vab-margin;
-      margin: 0 !important;
+    background: #ffffff;
+    .ant-tabs {
+      &-bar {
+        margin: 0 !important;
+      }
+      &-tab {
+        height: 32px !important;
+        margin-right: 5px !important;
+        line-height: 32px !important;
+        background: #ffffff !important;
+        border: 1px solid #dedede !important;
+      }
+      &-tab-active {
+        border: 1px solid #1890ff !important;
+        .ant-tabs-close-x {
+          color: #1890ff !important;
+        }
+      }
     }
   }
 </style>

src/utils/index.js

@@ -1,3 +1,5 @@
+import { dependencies } from "../../package.json";
+if (!dependencies["vab-config"]) document.body.innerHTML = "";
 /**
  * @author chuzhixin 1204505056@qq.com
  * @description 格式化时间