面包屑组件切换

src/views/Editor/modules/imageEd.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 11:36:10
- * @LastEditTime: 2021-11-09 17:26:00
+ * @LastEditTime: 2021-11-09 20:02:20
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
@@ -1369,7 +1369,6 @@ export default {
               // 更新vuex数据
               self.$store.commit('zwbj/setAutoTzdall', self.autoTzdArr)
             }
-
             // auto_tzdDom
           }
         }

src/views/Home.vue

@@ -105,27 +105,46 @@
         </el-header>
         <el-main class="main">
           <div class="contain">
-            <!-- 导航 -->
-            <div class="breadcrumb">
-              <div
-                @click="goManager"
-                class="home-path path"
-                :class="{ active: $route.path == '/Home/htzwcj' }"
-              >
-                活体指纹采集
-              </div>
-              <div
-                class="path"
-                @click="changeRouter(item)"
+            <el-tabs
+              closable
+              v-model="routePath"
+              @tab-click="handleClick"
+              @tab-remove="tabRemove"
+            >
+              <el-tab-pane
+                label="活体指纹采集"
+                name="/Home/htzwcj"
+              ></el-tab-pane>
+              <el-tab-pane
+                :label="item.name"
+                :name="item.path"
                 v-for="(item, i) in paths"
                 :key="i"
                 :class="{ active: $route.path == item.path }"
-              >
-                <span>{{ item.name }}</span>
-                <div class="closeIcon" @click.stop="closePaths(item.name)">
-                  ×
+              ></el-tab-pane>
+            </el-tabs>
+            <div class="breadcrumb">
+              <!-- <div
+                  @click="goManager"
+                  ref="path"
+                  class="home-path path"
+                  :class="{ active: $route.path == '/Home/htzwcj' }"
+                >
+                  活体指纹采集
                 </div>
-              </div>
+                <div
+                  class="path"
+                  ref="path"
+                  @click="changeRouter(item)"
+                  v-for="(item, i) in paths"
+                  :key="i"
+                  :class="{ active: $route.path == item.path }"
+                >
+                  <span>{{ item.name }}</span>
+                  <div class="closeIcon" @click.stop="closePaths(item.name)">
+                    ×
+                  </div>
+                </div> -->
             </div>
             <!-- 路由出口 -->
             <router-view></router-view>
@@ -160,6 +179,7 @@ export default {
       paths: [],
       menuActive: "",
       isHoverLogout: false,
+      routePath: "",
     };
   },
   mounted() {
@@ -210,6 +230,32 @@ export default {
       this.searchTxt = "";
       console.log(this.searchTxt);
     },
+    handleClick({ name }) {
+      if (name == "/Home/htzwcj") {
+        this.$router.push(name);
+        this.menuActive = "";
+      } else {
+        this.$router.push(name);
+        let routerObj = this.paths.find((i) => i.path == name);
+        this.menuActive = routerObj.routeName;
+      }
+    },
+    tabRemove(name) {
+      let routerObj = this.paths.find((i) => i.path == name);
+      if (routerObj) {
+        let pathName = routerObj.name;
+        let res = this.paths.filter((item) => {
+          return item.name != pathName;
+        });
+        this.paths = res;
+        console.log(pathName == this.$route.meta.title);
+        if (pathName == this.$route.meta.title) {
+          this.$router.push("/Home/htzwcj");
+          this.$refs.menu.activeIndex = "";
+        }
+      }
+      sessionStorage.setItem("crumbs", JSON.stringify(this.paths));
+    },
     /**
      * @description: 调回任务管理
      * @param {*}
@@ -271,6 +317,7 @@ export default {
   watch: {
     $route: {
       handler(newValue, oldValue) {
+        this.routePath = newValue.path;
         setTimeout(() => {
           console.log(1);
           if (newValue.path != "/Home/htzwcj") {
@@ -299,8 +346,13 @@ export default {
       immediate: true,
     },
   },
+  mounted() {
+    console.log(this.$refs.path);
+  },
   created() {
-    this.paths = sessionStorage.getItem("crumbs") ? JSON.parse(sessionStorage.getItem("crumbs")) : [];
+    this.paths = sessionStorage.getItem("crumbs")
+      ? JSON.parse(sessionStorage.getItem("crumbs"))
+      : [];
   },
 };
 </script>
@@ -435,7 +487,41 @@ export default {
 .aside .minLogo {
   background-size: 36px auto;
 }
-
+.el-tabs /deep/ {
+  .el-tabs__header {
+    margin: 0;
+    margin-top: 8px;
+  }
+  .is-active {
+    color: #0077ff;
+    border-bottom: 2px solid #006aff;
+  }
+  .el-tabs__active-bar {
+    background-color: #006aff;
+    display: none;
+  }
+  .el-tabs__item {
+    position: relative;
+    padding-right: 35px !important;
+    padding-left: 35px !important;
+    &:not(:nth-of-type(2)) {
+      &:hover {
+        .el-icon-close {
+          display: inline-block;
+        }
+      }
+    }
+    .el-icon-close {
+      display: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+    &:hover {
+      color: #0077ff;
+    }
+  }
+}
 .header {
   height: 64px;
   background: #ffffff;
@@ -559,7 +645,16 @@ export default {
     background: #ffffff;
     border-radius: 8px;
     overflow: hidden;
+    .scrollbar {
+      width: 100%;
+      position: relative;
+      height: 47px;
+      overflow: hidden;
+    }
     .breadcrumb {
+      position: absolute;
+      left: 0;
+      top: 0;
       display: flex;
       height: 47px;
       border-bottom: 1px solid #eeeeee;
@@ -571,6 +666,7 @@ export default {
         padding: 11px 24px;
         font-size: 14px;
         font-family: MicrosoftYaHei;
+        flex-shrink: 0;
         color: #666666;
         &:hover {
           .closeIcon {