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>
相关推荐
EricWang13589 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning9 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人19 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂41 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
不秃头的UI设计师1 小时前
UI界面设计入门:打造卓越用户体验
ui·ux·ui设计
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
tyler_download1 小时前
golang 实现比特币内核:处理椭圆曲线中的天文数字
golang·blockchain·bitcoin