Menu 导航菜单

为网站提供导航功能的菜单，支持水平/垂直模式、子菜单展开、折叠等特性。

基础用法

通过 mode 属性设置水平或垂直菜单，default-active 设置当前激活项。

• 首页
• 组件
• 文档
• 关于

<template>
  <ZcMenu :default-active="active" mode="horizontal">
    <ZcMenuItem index="1">首页</ZcMenuItem>
    <ZcMenuItem index="2">组件</ZcMenuItem>
    <ZcMenuItem index="3" disabled>文档</ZcMenuItem>
    <ZcMenuItem index="4">关于</ZcMenuItem>
  </ZcMenu>
</template>

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

垂直菜单 + 子菜单

垂直模式下通过 ZcSubmenu 创建子菜单。

• 仪表盘
• 系统管理
  • 用户管理
  • 角色管理
  • 权限配置
• 数据分析
  • 概览
  • 报表
• 日志

<template>
  <ZcMenu :default-active="active" mode="vertical">
    <ZcMenuItem index="1">仪表盘</ZcMenuItem>
    <ZcSubmenu index="2">
      <template #title>系统管理</template>
      <ZcMenuItem index="2-1">用户管理</ZcMenuItem>
      <ZcMenuItem index="2-2">角色管理</ZcMenuItem>
      <ZcMenuItem index="2-3">权限配置</ZcMenuItem>
    </ZcSubmenu>
    <ZcSubmenu index="3">
      <template #title>数据分析</template>
      <ZcMenuItem index="3-1">概览</ZcMenuItem>
      <ZcMenuItem index="3-2">报表</ZcMenuItem>
    </ZcSubmenu>
    <ZcMenuItem index="4">日志</ZcMenuItem>
  </ZcMenu>
</template>

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

折叠菜单

通过 collapse 属性将垂直菜单折叠为图标模式。

• 首页
• 管理
  • 用户
  • 设置
• 日志

<template>
  <ZcMenu :default-active="active" mode="vertical" :collapse="isCollapsed">
    <ZcMenuItem index="1">首页</ZcMenuItem>
    <ZcSubmenu index="2">
      <template #title>管理</template>
      <ZcMenuItem index="2-1">用户</ZcMenuItem>
      <ZcMenuItem index="2-2">设置</ZcMenuItem>
    </ZcSubmenu>
    <ZcMenuItem index="3">日志</ZcMenuItem>
  </ZcMenu>
  <ZcButton @click="isCollapsed = !isCollapsed" style="margin-top: 12px;">
    {{ isCollapsed ? '展开' : '折叠' }}
  </ZcButton>
</template>

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

Menu API

Props

参数	说明	类型	默认值
mode	菜单模式	'horizontal' | 'vertical'	'vertical'
defaultActive	当前激活项索引	string	''
collapse	是否折叠（垂直模式）	boolean	false
backgroundColor	菜单背景色	string	''
textColor	菜单文字颜色	string	''
activeTextColor	激活项文字颜色	string	''
uniqueOpened	是否只保持一个子菜单展开	boolean	false
collapseTransition	折叠动画	boolean	true
router	是否启用路由模式	boolean	false

Events

事件名	说明	回调参数
select	菜单项选中	(index: string, indexPath: string[])
open	子菜单展开	(index: string, indexPath: string[])
close	子菜单收起	(index: string, indexPath: string[])

MenuItem Props

参数	说明	类型	默认值
index	唯一标识	string	''
route	路由路径	string	''
disabled	是否禁用	boolean	false

Submenu Props

参数	说明	类型	默认值
index	唯一标识	string	''
popperClass	弹出层自定义类名	string	''
showTimeout	显示延迟（ms，水平模式）	number	300
hideTimeout	隐藏延迟（ms，水平模式）	number	300
disabled	是否禁用	boolean	false

Submenu Slots

插槽名	说明
title	子菜单标题
default	子菜单内容