Menu UI 组件

Menu UI 组件是一个基于 Vue 3 的高度可定制化菜单组件，支持垂直和水平布局、折叠模式、主题切换等功能，适用于各种导航菜单场景。

安装

npm install @cimom/vben-core-ui-kit-menu-ui

基本使用

<script setup lang="ts">
import { MenuView } from '@cimom/vben-core-ui-kit-menu-ui';
import { ref } from 'vue';

const collapse = ref(false);
const menus = [
  {
    path: 'dashboard',
    title: '仪表盘',
    icon: 'Dashboard',
    children: [
      {
        path: 'analysis',
        title: '分析页',
      },
      {
        path: 'workbench',
        title: '工作台',
      },
    ],
  },
  {
    path: 'system',
    title: '系统管理',
    icon: 'Setting',
    children: [
      {
        path: 'user',
        title: '用户管理',
      },
      {
        path: 'role',
        title: '角色管理',
      },
    ],
  },
];
</script>

<template>
  <MenuView :menus="menus" :collapse="collapse" theme="dark" />
</template>

组件属性

MenuView Props

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | menus | MenuRecordRaw[] | [] | 菜单数据 | | accordion | boolean | true | 是否开启手风琴模式 | | collapse | boolean | false | 菜单是否折叠 | | collapseShowTitle | boolean | false | 菜单折叠时是否显示菜单名称 | | defaultActive | string | - | 默认激活的菜单 | | defaultOpeneds | string[] | - | 默认展开的菜单 | | mode | 'horizontal' \| 'vertical' | 'vertical' | 菜单模式 | | rounded | boolean | true | 是否圆润风格 | | scrollToActive | boolean | false | 是否自动滚动到激活的菜单项 | | theme | ThemeModeType | 'dark' | 菜单主题 |

MenuRecordRaw 菜单项配置

| 属性名 | 类型 | 说明 | | ---------- | --------------------- | -------------- | | path | string | 菜单路径，必填 | | title | string | 菜单标题 | | icon | Component \| string | 菜单图标 | | activeIcon | string | 激活状态图标 | | disabled | boolean | 是否禁用 | | children | MenuRecordRaw[] | 子菜单 | | badge | number \| string | 徽标内容 | | badgeProps | object | 徽标属性 | | badgeDot | boolean | 是否显示徽标点 |

菜单主题

菜单组件支持两种主题：

• 'light': 浅色主题
• 'dark': 深色主题

<template>
  <MenuView :menus="menus" theme="light" />
</template>

菜单模式

菜单组件支持两种模式：

• 'vertical': 垂直模式（默认）
• 'horizontal': 水平模式

<template>
  <MenuView :menus="menus" mode="horizontal" />
</template>

折叠菜单

可以通过 collapse 属性控制菜单的折叠状态：

<template>
  <div>
    <button @click="collapse = !collapse">切换折叠状态</button>
    <MenuView :menus="menus" :collapse="collapse" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const collapse = ref(false);
</script>

示例

垂直菜单示例

<template>
  <div class="flex">
    <div class="h-screen w-64 bg-gray-800">
      <MenuView
        :menus="menus"
        :collapse="collapse"
        theme="dark"
        :default-active="activeMenu"
        @menu-item-click="handleMenuClick"
      />
    </div>
    <div class="flex-1 p-4">
      <button
        class="mb-4 rounded bg-blue-500 px-4 py-2 text-white"
        @click="collapse = !collapse"
      >
        {{ collapse ? '展开' : '折叠' }} 菜单
      </button>
      <div>当前选中: {{ activeMenu }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MenuView } from '@cimom/vben-core-ui-kit-menu-ui';
import { ref } from 'vue';

const collapse = ref(false);
const activeMenu = ref('dashboard/analysis');

const menus = [
  {
    path: 'dashboard',
    title: '仪表盘',
    icon: 'Dashboard',
    children: [
      {
        path: 'dashboard/analysis',
        title: '分析页',
      },
      {
        path: 'dashboard/workbench',
        title: '工作台',
      },
    ],
  },
  {
    path: 'system',
    title: '系统管理',
    icon: 'Setting',
    children: [
      {
        path: 'system/user',
        title: '用户管理',
      },
      {
        path: 'system/role',
        title: '角色管理',
        badge: '新',
        badgeProps: {
          type: 'success',
        },
      },
    ],
  },
  {
    path: 'https://example.com',
    title: '外部链接',
    icon: 'Link',
  },
];

const handleMenuClick = (item) => {
  activeMenu.value = item.path;
  console.log('菜单点击:', item);
};
</script>

水平菜单示例

<template>
  <div class="flex h-screen flex-col">
    <div class="bg-gray-800 text-white">
      <MenuView
        :menus="menus"
        mode="horizontal"
        theme="dark"
        :default-active="activeMenu"
        @menu-item-click="handleMenuClick"
      />
    </div>
    <div class="flex-1 p-4">
      <div>当前选中: {{ activeMenu }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MenuView } from '@cimom/vben-core-ui-kit-menu-ui';
import { ref } from 'vue';

const activeMenu = ref('dashboard');

const menus = [
  {
    path: 'dashboard',
    title: '仪表盘',
    icon: 'Dashboard',
  },
  {
    path: 'system',
    title: '系统管理',
    icon: 'Setting',
    children: [
      {
        path: 'system/user',
        title: '用户管理',
      },
      {
        path: 'system/role',
        title: '角色管理',
      },
    ],
  },
  {
    path: 'profile',
    title: '个人中心',
    icon: 'User',
    badgeDot: true,
  },
];

const handleMenuClick = (item) => {
  activeMenu.value = item.path;
  console.log('菜单点击:', item);
};
</script>