Menu 菜单

为页面提供导航的菜单列表，可配合 Layout Aside 使用。

基础用法

• 导航一
  • 选项 1
  • 选项 2
• 导航二
• 导航三

• 处理中心
• 我的工作台
  • 选项一
  • 选项二
• 消息中心

<script setup>
import { ref } from 'vue'
import { DanMenu, DanMenuItem, DanSubMenu } from '@dandan-ui/ui'

const active = ref('1-1')
</script>

<template>
  <div style="display: flex; gap: 24px; align-items: flex-start">
    <DanMenu v-model="active" style="width: 220px" :default-openeds="['1']">
      <DanSubMenu index="1" title="导航一">
        <DanMenuItem index="1-1">选项 1</DanMenuItem>
        <DanMenuItem index="1-2">选项 2</DanMenuItem>
      </DanSubMenu>
      <DanMenuItem index="2">导航二</DanMenuItem>
      <DanMenuItem index="3" disabled>导航三</DanMenuItem>
    </DanMenu>

    <DanMenu v-model="active" mode="horizontal" style="flex: 1">
      <DanMenuItem index="h-1">处理中心</DanMenuItem>
      <DanSubMenu index="h-2" title="我的工作台">
        <DanMenuItem index="h-2-1">选项一</DanMenuItem>
        <DanMenuItem index="h-2-2">选项二</DanMenuItem>
      </DanSubMenu>
      <DanMenuItem index="h-3">消息中心</DanMenuItem>
    </DanMenu>
  </div>
</template>

Menu Props

属性	说明	类型	默认值
modelValue / v-model	当前激活项 index	string	''
mode	模式	'vertical' | 'horizontal'	'vertical'
defaultOpeneds	默认展开的 SubMenu index	string[]	[]
collapse	是否折叠（仅垂直模式）	boolean	false

Menu Events

事件	说明	参数
select	选中菜单项	(index)
open / close	展开 / 收起子菜单	(index)

MenuItem / SubMenu Props

属性	说明	类型	默认值
index	唯一标识	string	—
title	SubMenu 标题（也可用 #title）	string	''
disabled	禁用	boolean	false