Menu 菜单

收起展开菜单，适合有多级层级关系的菜单展示。

基础用法

• 处理中心
• 我的工作台
• 消息中心
• 订单管理

<template>
  <x-menu v-model="activeIndex">
    <x-menu-item index="1">处理中心</x-menu-item>
    <x-menu-item index="2">我的工作台</x-menu-item>
    <x-menu-item index="3">消息中心</x-menu-item>
  </x-menu>
</template>

<script setup>
import { ref } from 'vue'
const activeIndex = ref('1')
</script>

水平菜单

• 处理中心
• 我的工作台
• 消息中心

<template>
  <x-menu v-model="activeIndex" mode="horizontal">
    <x-menu-item index="1">处理中心</x-menu-item>
    <x-menu-item index="2">我的工作台</x-menu-item>
  </x-menu>
</template>

子菜单 SubMenu

使用 x-sub-menu 组件实现多级嵌套菜单。

• 处理中心
• 我的工作台
  • 选项1
  • 选项2
  • 选项3
• 消息中心
  • 系统消息
  • 用户消息
• 订单管理

<template>
  <x-menu v-model="activeIndex">
    <x-menu-item index="1">处理中心</x-menu-item>
    <x-sub-menu index="2" title="我的工作台">
      <x-menu-item index="2-1">选项1</x-menu-item>
      <x-menu-item index="2-2">选项2</x-menu-item>
      <x-menu-item index="2-3">选项3</x-menu-item>
    </x-sub-menu>
    <x-sub-menu index="3" title="消息中心">
      <x-menu-item index="3-1">系统消息</x-menu-item>
      <x-menu-item index="3-2">用户消息</x-menu-item>
    </x-sub-menu>
  </x-menu>
</template>

侧栏菜单

结合布局组件实现完整的侧边栏导航。

使用 icon 属性

通过 icon 属性直接指定图标名称，组件会自动使用 Icon 组件渲染。

• 首页
• 系统管理
  • 用户管理
  • 角色管理
  • 权限管理
• 数据中心
  • 数据概览
  • 报表中心
• 日志管理

点击按钮切换侧栏折叠状态

<template>
  <div style="display: flex; height: 100%;">
    <x-menu v-model="activeIndex" :collapse="isCollapse">
      <x-menu-item index="1" icon="home">首页</x-menu-item>
      <x-sub-menu index="2" icon="system" title="系统管理">
        <x-menu-item index="2-1">用户管理</x-menu-item>
        <x-menu-item index="2-2">角色管理</x-menu-item>
        <x-menu-item index="2-3">权限管理</x-menu-item>
      </x-sub-menu>
      <x-sub-menu index="3" icon="chart" title="数据中心">
        <x-menu-item index="3-1">数据概览</x-menu-item>
        <x-menu-item index="3-2">报表中心</x-menu-item>
      </x-sub-menu>
      <x-menu-item index="4" icon="log">日志管理</x-menu-item>
    </x-menu>
    <div style="flex: 1;">内容区域</div>
  </div>
</template>

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

const activeIndex = ref('1')
const isCollapse = ref(false)
</script>

自定义图标

如果需要自定义图标样式或使用自定义图标，可以使用 #icon 插槽。

• 首页
• 系统管理
  • 用户管理
  • 角色管理
• 日志管理

<template>
  <x-menu v-model="activeIndex" :collapse="isCollapse">
    <x-menu-item index="1">
      <template #icon><x-icon name="home" :size="20" color="#409eff" /></template>
      首页
    </x-menu-item>
    <x-sub-menu index="2">
      <template #icon><x-icon name="system" :size="20" color="#67c23a" /></template>
      <template #title>系统管理</template>
      <x-menu-item index="2-1">用户管理</x-menu-item>
    </x-sub-menu>
  </x-menu>
</template>

可用菜单图标

以下图标适合用于菜单导航：

图标	名称	适用场景
	home	首页
	dashboard	仪表盘
	system	系统管理
	user-manage	用户管理
	role	角色管理
	permission	权限管理
	chart	数据图表
	chart-pie	饼图
	chart-line	折线图
	report	报表
	analytics	数据分析
	log	日志
	notification	通知
	app	应用
	sidebar-fold	收起侧栏
	sidebar-expand	展开侧栏

水平菜单 + 子菜单

• 处理中心
• 我的工作台
  • 选项1
  • 选项2
  • 选项3
• 消息中心
• 订单管理
  • 全部订单
  • 待付款
  • 已完成

<template>
  <x-menu v-model="activeIndex" mode="horizontal">
    <x-menu-item index="1">处理中心</x-menu-item>
    <x-sub-menu index="2" title="我的工作台">
      <x-menu-item index="2-1">选项1</x-menu-item>
      <x-menu-item index="2-2">选项2</x-menu-item>
    </x-sub-menu>
  </x-menu>
</template>

API

Menu Props

属性	说明	类型	默认值
modelValue / v-model	当前激活菜单的 index	string	—
mode	模式	'horizontal' | 'vertical'	'vertical'
collapse	是否水平折叠收起菜单	boolean	false
backgroundColor	菜单背景色	string	'#fff'
textColor	文字颜色	string	'#303133'
activeTextColor	激活文字颜色	string	'#409eff'
defaultOpeneds	默认展开的 SubMenu 索引数组	string[]	[]
router	是否使用 vue-router 模式	boolean	false

Menu Events

事件名	说明	回调参数
select	菜单激活时触发	(index: string, indexPath: string[])
open	SubMenu 展开时触发	(index: string, indexPath: string[])
close	SubMenu 收起时触发	(index: string, indexPath: string[])

MenuItem Props

属性	说明	类型	默认值
index	唯一标识	string	—
disabled	是否禁用	boolean	false
icon	图标名称，传入 Icon 组件支持的图标名	string	—

MenuItem Slots

插槽名	说明
default	菜单项文字内容
icon	自定义图标内容，优先级高于 icon 属性

SubMenu Props

属性	说明	类型	默认值
index	唯一标识	string	—
title	子菜单标题	string	—
disabled	是否禁用	boolean	false
icon	图标名称，传入 Icon 组件支持的图标名	string	—

SubMenu Slots

插槽名	说明
default	菜单项内容
title	自定义标题内容
icon	自定义图标内容，优先级高于 icon 属性

MenuItemGroup Props

属性	说明	类型	默认值
title	分组标题	string	—