go-admin-ui的菜单分割线设计思路和代码实现

在菜单管理添加分割线,类似这种:

思路:利用空间结构和数据特点来唯一区分出分割线,来划分业务区域

html 复制代码
<template>
  <div>
    <h1>Split Line Controller</h1>
    <ul>
      <li v-for="route in displayedRoutes" :key="route.path">
        {{ route.meta?.title || '' }} - {{ route.hidden ? '隐藏' : '显示' }}
        <ul v-if="filteredChildren(route).length">
          <li v-for="child in filteredChildren(route)" :key="child.path">
            ------ {{ child.meta?.title || '' }} - {{ child.hidden ? '隐藏' : '显示' }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SplitLineController",
  data() {
    return {
      routes: [
        {
          "path": "/redirect",
          "hidden": true,
          "children": [
            {
              "path": "/redirect/:path*"
            }
          ]
        },
        {
          "path": "/login",
          "hidden": true
        },
        {
          "path": "/auth-redirect",
          "hidden": true
        },
        {
          "path": "/404",
          "hidden": true
        },
        {
          "path": "/401",
          "hidden": true
        },
        {
          "path": "/",
          "redirect": "/home-page",
          "hidden": true,
          "children": [
            {
              "path": "home-page",
              "name": "HomePage",
              "meta": {
                "title": "欢迎页",
                "icon": "home-page"
              }
            }
          ]
        },
        {
          "path": "/profile",
          "redirect": "/profile/index",
          "hidden": true,
          "children": [
            {
              "path": "index",
              "name": "Profile",
              "meta": {
                "title": "个人中心",
                "icon": "user"
              }
            }
          ]
        },
        {
          "path": "/home-page",
          "hidden": false,
          "children": [],
          "name": "HomePage",
          "meta": {
            "title": "首页",
            "icon": "home-page"
          }
        },
        {
          "path": "/permission",
          "hidden": true,
          "children": [
            {
              "path": "/permission/my-application",
              "hidden": false,
              "children": [],
              "name": "MyApplicationManage",
              "meta": {
                "title": "我的申请",
                "icon": "api-monitor"
              }
            }
          ],
          "name": "",
          "meta": {
            "title": "权限申请",
            "icon": "access"
          }
        },
        {
          "path": "",
          "hidden": false,
          "children": [],
          "name": "",
          "meta": {
            "title": "xx业务分割线1",
            "icon": ""
          }
        },
        {
          "path": "/apple",
          "hidden": false,
          "children": [
            {
              "path": "/apple/tree",
              "hidden": false,
              "children": [],
              "name": "tree",
              "meta": {
                "title": "苹果树木",
                "icon": "nested"
              }
            },
            {
              "path": "/apple/leaf",
              "hidden": false,
              "children": [],
              "name": "leaf",
              "meta": {
                "title": "苹果叶子",
                "icon": "alarm-settings"
              }
            }
          ],
          "name": "AppleContent",
          "meta": {
            "title": "苹果内容质量",
            "icon": "list"
          }
        },
        {
          "path": "/banana",
          "hidden": false,
          "children": [
            {
              "path": "/banana/tree",
              "hidden": false,
              "children": [],
              "name": "tree",
              "meta": {
                "title": "香蕉树木",
                "icon": "size"
              }
            },
            {
              "path": "/banana/leaf",
              "hidden": false,
              "children": [],
              "name": "leaf",
              "meta": {
                "title": "香蕉叶子",
                "icon": "edit"
              }
            },
          ],
          "name": "",
          "meta": {
            "title": "香蕉评级后台",
            "icon": "peoples"
          }
        },
        {
          "path": "",
          "hidden": false,
          "children": [],
          "name": "",
          "meta": {
            "title": "xx业务分割线2",
            "icon": ""
          }
        },
        {
          "path": "/cat",
          "hidden": false,
          "children": [
            {
              "path": "/cat/live",
              "hidden": false,
              "children": [],
              "name": "Live",
              "meta": {
                "title": "猫",
                "icon": "build"
              }
            },
            {
              "path": "/dog/live",
              "hidden": false,
              "children": [],
              "name": "LiveComDistributionMange",
              "meta": {
                "title": "狗",
                "icon": "api-server"
              }
            }
          ],
          "name": "",
          "meta": {
            "title": "宠物管理",
            "icon": "build"
          }
        },
        {
          "path": "",
          "hidden": false,
          "children": [],
          "name": "",
          "meta": {
            "title": "xx管理分割线3",
            "icon": ""
          }
        },
        {
          "path": "/person",
          "hidden": false,
          "children": [
            {
              "path": "/person/myself",
              "hidden": false,
              "children": [],
              "name": "SysBusinessUserManage",
              "meta": {
                "title": "我的介绍",
                "icon": "people"
              }
            }
          ],
          "name": "Admin",
          "meta": {
            "title": "系统管理",
            "icon": "api-server"
          }
        }
      ],
      displayedRoutes: []
    };
  },
  methods: {
    controlSplits(routes) {
      let displayedRoutes = JSON.parse(JSON.stringify(routes)); // 深拷贝以保持原始结构
      for (let i = 0; i < displayedRoutes.length; i++) {
        const currentRoute = displayedRoutes[i];
        if (this.isSplitLine(currentRoute)) {
          let hasVisibleSibling = false;
          for (let j = i + 1; j < displayedRoutes.length; j++) {
            const nextRoute = displayedRoutes[j];
            if (this.isSplitLine(nextRoute)) break;
            if (!nextRoute.hidden) {
              hasVisibleSibling = true;
              break;
            }
          }
          currentRoute.hidden = !hasVisibleSibling;
        }
      }
      return displayedRoutes;
    },
    isSplitLine(route) {
      return route.path === "" && !route.component && route.meta && !route.meta.icon;
    },
    filteredChildren(route) {
      if (route.children) {
        return route.children.filter(child => !child.hidden);
      }
      return [];
    }
  },
  created() {
    this.displayedRoutes = this.controlSplits(this.routes);
  }
};
</script>

<style scoped>
h1 {
  font-size: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}
</style>
相关推荐
哑巴语天雨1 分钟前
React+Vite项目框架
前端·react.js·前端框架
初遇你时动了情15 分钟前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js
乔峰不是张无忌33034 分钟前
【HTML】动态闪烁圣诞树+雪花+音效
前端·javascript·html·圣诞树
鸿蒙自习室41 分钟前
鸿蒙UI开发——组件滤镜效果
开发语言·前端·javascript
m0_748250741 小时前
高性能Web网关:OpenResty 基础讲解
前端·openresty
前端没钱1 小时前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js
NoneCoder1 小时前
CSS系列(29)-- Scroll Snap详解
前端·css
无言非影1 小时前
vtie项目中使用到了TailwindCSS,如何打包成一个单独的CSS文件(优化、压缩)
前端·css
我曾经是个程序员2 小时前
鸿蒙学习记录
开发语言·前端·javascript
羊小猪~~2 小时前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5