Menu 菜单

为页面和功能提供导航的菜单列表，支持垂直、水平、内联三种模式，以及折叠收起功能。

垂直菜单

首页

产品

关于我们

联系我们

默认垂直模式，子菜单受控展开

vue

<script setup lang="ts">
import { ref } from 'vue'
import { AMenu } from '@lite-code/aui-vue'

const selected = ref('1')

const items = [
  { key: '1', label: '首页' },
  { key: '2', label: '产品', children: [
    { key: '2-1', label: '产品介绍' },
    { key: '2-2', label: '产品文档' },
  ]},
  { key: '3', label: '关于我们' },
  { key: '4', label: '联系我们', disabled: true },
]
</script>

<template>
  <AMenu :items="items" :selected-key="selected" @select="selected = $event" />
</template>

水平菜单

首页

产品

解决方案

关于我们

mode='horizontal' 顶部导航，子菜单通过 Teleport 弹出

vue

<script setup lang="ts">
import { ref } from 'vue'
import { AMenu } from '@lite-code/aui-vue'

const selected = ref('1')

const items = [
  { key: '1', label: '首页' },
  { key: '2', label: '产品', children: [
    { key: '2-1', label: '产品介绍' },
    { key: '2-2', label: '产品文档' },
  ]},
  { key: '3', label: '解决方案' },
  { key: '4', label: '关于我们' },
]
</script>

<template>
  <AMenu :items="items" :selected-key="selected" mode="horizontal" @select="selected = $event" />
</template>

内联展开 + 折叠

折叠菜单

导航组一

选项 1-1

选项 1-2

导航组二

独立选项

mode='inline' 子菜单原地展开；collapsed 折叠为仅图标宽度

vue

<script setup lang="ts">
import { ref } from 'vue'
import { AMenu } from '@lite-code/aui-vue'

const selected  = ref('1-1')
const collapsed = ref(false)

const items = [
  { key: '1', label: '导航组一', icon: 'calendar' as const, children: [
    { key: '1-1', label: '选项 1-1', icon: 'file' as const },
    { key: '1-2', label: '选项 1-2', icon: 'clock' as const },
  ]},
  { key: '2', label: '导航组二', icon: 'upload' as const, children: [
    { key: '2-1', label: '选项 2-1', icon: 'check' as const },
    { key: '2-2', label: '选项 2-2', icon: "x" as const, disabled: true },
  ]},
  { key: '3', label: '独立选项', icon: 'refresh' as const },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <label style="display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer;">
      <input type="checkbox" v-model="collapsed" />
      折叠菜单
    </label>
    <AMenu
      :items="items"
      :selected-key="selected"
      :collapsed="collapsed"
      :default-open-keys="['1']"
      @select="selected = $event"
    />
  </div>
</template>

API

Props

属性	类型	默认值	说明
items	MenuItemType[]	—	菜单数据（必填）
selectedKey	string	—	当前选中的菜单 key（受控）
defaultSelectedKey	string	—	默认选中（非受控）
openKeys	string[]	—	当前展开的子菜单 key（受控）
defaultOpenKeys	string[]	[]	默认展开的子菜单 key（非受控）
onSelect	(key) => void	—	选中菜单项回调
onOpenChange	(keys) => void	—	子菜单展开/收起回调
mode	MenuMode	'vertical'	模式：vertical | horizontal | inline
collapsed	boolean	false	是否折叠（仅 vertical/inline 有效）
className	string	—	自定义 class
style	object	—	自定义样式

MenuItemType

字段	类型	说明
key	string	唯一标识（必填）
label	string	显示文字（必填）
disabled	boolean	是否禁用
children	MenuItemType[]	子菜单

类型

type MenuMode = "vertical" | "horizontal" | "inline";