Browse Source

修复点击知识图谱背景变色bug

cynthia-qin 1 month ago
parent
commit
10b47a5adf
1 changed files with 20 additions and 1 deletions
  1. 20 1
      src/components/LayoutHeader.vue

+ 20 - 1
src/components/LayoutHeader.vue

@@ -6,7 +6,7 @@
     </div> -->
     <div class="menu">
       <el-menu :default-active="currentPath" ref="menuRef" class="el-menu-demo" mode="horizontal">
-        <el-menu-item :index="item.path" v-for="item in routeList" :key="item.name"
+        <el-menu-item :index="item.path" v-for="item in routeList" :key="item.name" :class="{ 'external-link-item': isExternalLink(item.path) }"
           @click="handleMenuClick(item.path)">{{ item.title }}</el-menu-item>
       </el-menu>
     </div>
@@ -69,6 +69,11 @@ const handleLogout = () => {
   clearSessionVar()
 }
 
+// 判断是否为外部链接的方法
+const isExternalLink = (path) => {
+  return /^https?/g.test(path);
+};
+
 
 function handleMenuClick(path) {
   if (/^https?/g.test(path)) {
@@ -79,6 +84,7 @@ function handleMenuClick(path) {
     }, 1000)
     menuRef.value.updateActiveIndex(currentPath.value)
   } else {
+    if (route.path.includes(path)) return
     router.push({ path: path })
   }
 }
@@ -133,6 +139,19 @@ onBeforeUnmount(() => {
         font-size: 20px;
       }
     }
+    .external-link-item {
+      // 覆盖激活效果
+      &.is-active {
+        background-color: transparent !important;
+        color: inherit !important;
+      }
+
+      // 覆盖点击效果
+      &:focus {
+        background-color: transparent !important;
+        color: inherit !important;
+      }
+    }
   }
 }
 </style>