feat: 菜单外部链接追加一个link图标

cadecode · Apr 20, 2023 · 05d2174 · 05d2174
1 parent 99e62a7
commit 05d2174
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 16 deletions.
diff --git a/src/layout/component/Sidebar/Item.vue b/src/layout/component/Sidebar/Item.vue
@@ -10,32 +10,46 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    isExternal: {
+      type: Boolean,
+      default: false
     }
   },
+  // 使用render渲染，避免使用一个根节点，可利用title slot
   render(h, context) {
-    const {icon, title} = context.props;
+    const {icon, title, isExternal} = context.props;
     const vNodes = [];
-
     if (icon) {
+      // 兼容ElementUI图标和svg-icon
       if (icon.includes('el-icon')) {
         vNodes.push(<i class={[icon, 'sub-el-icon']}/>);
       } else {
         vNodes.push(<svg-icon icon-class={icon}/>);
       }
     }
-
+    // 使用slot插入el-menu-item
     if (title) {
       vNodes.push(<span slot='title'>{(title)}</span>);
     }
+    // 外部链接追加一个link图标
+    if (isExternal) {
+      vNodes.push(<i slot='title' class='el-icon-link'/>);
+    }
     return vNodes;
   }
 };
 </script>
 
 <style scoped>
 .sub-el-icon {
-  color: currentColor;
-  width: 1em;
-  height: 1em;
+    color: currentColor;
+    width: 1em;
+    height: 1em;
+}
+
+.el-icon-link {
+    font-size: 12px;
 }
 </style>
+
diff --git a/src/layout/component/Sidebar/SidebarItem.vue b/src/layout/component/Sidebar/SidebarItem.vue
@@ -1,12 +1,13 @@
 <template>
   <div v-if="!item.hidden">
-    <template
-      v-if="hasOneShowingChild(item.children, item)
-        && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow"
-    >
+    <template v-if="hasOneShowingChild(item.children, item)">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" />
+          <item
+            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
+            :title="onlyOneChild.meta.title"
+            :is-external="isExternalUrl(onlyOneChild.path)"
+          />
         </el-menu-item>
       </app-link>
     </template>
@@ -60,6 +61,9 @@ export default {
     };
   },
   methods: {
+    isExternalUrl(path) {
+      return isExternalUrl(path) || isExternalUrl(this.basePath);
+    },
     hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {
         if (item.hidden) {
@@ -69,14 +73,17 @@ export default {
           return true;
         }
       });
-      // 当只有一个子路由器，默认显示子路由
-      if (showingChildren.length === 1) {
-        return true;
-      }
       // 没有子路由时显示父级
       if (showingChildren.length === 0) {
+        // 父级属性放入onlyOneChild
         this.onlyOneChild = {...parent, path: '', noShowingChildren: true};
-        return true;
+        // alwaysShow将显示为菜单，非alwaysShow并且没有子路由则显示成页面（表现为不带展开图标）
+        return !parent.alwaysShow;
+      }
+      // 当只有一个子路由器，默认显示子路由
+      if (showingChildren.length === 1) {
+        // onlyOneChild没有children并且父级不是alwaysShow
+        return !this.onlyOneChild.children && !parent.alwaysShow;
       }
       return false;
     },