Menus 菜单

用于网站导航的菜单组件，支持多级菜单、折叠展开、自定义图标等功能。

基础用法

<template>
  <g-menus
    :menus="menuItems"
    :active-key="activeKey"
    :is-collapse="isCollapse"
    @goto="handleGoto"
  />
</template>

<script setup>
const menuItems = [
  {
    name: 'dashboard',
    meta: {
      title: '仪表盘',
      icon: 'DashboardIcon',
    },
  },
  {
    name: 'system',
    meta: {
      title: '系统管理',
      icon: 'https://example.com/system-icon.png',
    },
    children: [
      {
        name: 'user',
        meta: {
          title: '用户管理',
        },
      },
      {
        name: 'role',
        meta: {
          title: '角色管理',
        },
      },
    ],
  },
]

const isCollapse = ref(false)
const activeKey = ref('dashboard')

const handleGoto = (item) => {
  console.log('导航到:', item.name)
}
</script>

Props

参数	说明	类型	默认值
menus	菜单配置项	MenuItem[]	[]
isCollapse	是否折叠菜单	boolean	false
showMenuBg	是否显示菜单背景	boolean	false
activeKey	当前激活的菜单项	string	''
disabled	是否禁用菜单	boolean	false
svgIcons	SVG 图标组件映射对象	Record<string, Component>	{}

MenuItem 类型

interface MenuItem {
  name: string // 菜单项唯一标识
  meta: {
    title: string // 菜单项标题
    icon?: string // 图标（支持组件名、SVG组件或OSS图片URL）
  }
  children?: MenuItem[] // 子菜单项
}

Events

事件名	说明	回调参数
goto	点击菜单项时触发	(item: MenuItem) => void
toggle-collapse	点击折叠按钮时触发	() => void

功能特性

图标支持

组件支持三种类型的图标：

1. 组件图标：直接使用组件名称
2. SVG 组件：通过 svgIcons 属性注册的 SVG 组件
3. OSS 图片：使用图片 URL

折叠展开

• 支持通过 isCollapse 控制菜单折叠状态
• 点击底部折叠按钮可触发 toggle-collapse 事件

样式定制

• 自定义背景：通过 showMenuBg 控制是否显示背景装饰
• 菜单样式：使用暗色主题，支持悬浮高亮和选中状态