Menu 导航栏

收纳、排列并展示一系列选项的导航栏。

基本用法

使用 Menu 包裹菜单的每一项 Menu-item：

无默认值

• 菜单1
• 菜单2
• 菜单3
• 菜单4

有默认值（非受控）

• 菜单1
• 菜单2
• 菜单3
• 菜单4

有固定值（受控）

• 菜单1
• 菜单2
• 菜单3
• 菜单4

一般用法

• 菜单1
• 菜单2
• 菜单3
• 菜单4

v-model 用法

• 菜单1
• 菜单2
• 菜单3
• 菜单4

<template>
  <h4>无默认值</h4>
  <i-menu>
    <i-menu-item>菜单1</i-menu-item>
    <i-menu-item>菜单2</i-menu-item>
    <i-menu-item>菜单3</i-menu-item>
    <i-menu-item>菜单4</i-menu-item>
  </i-menu>

  <h4>有默认值（非受控）</h4>
  <i-menu :defaultActive="active">
    <i-menu-item>菜单1</i-menu-item>
    <i-menu-item>菜单2</i-menu-item>
    <i-menu-item>菜单3</i-menu-item>
    <i-menu-item>菜单4</i-menu-item>
  </i-menu>

  <h4>有固定值（受控）</h4>
  <i-menu :modelValue="active">
    <i-menu-item>菜单1</i-menu-item>
    <i-menu-item>菜单2</i-menu-item>
    <i-menu-item>菜单3</i-menu-item>
    <i-menu-item>菜单4</i-menu-item>
  </i-menu>

  <h4>一般用法</h4>
  <i-menu :modelValue="active" @change="handleChange">
    <i-menu-item>菜单1</i-menu-item>
    <i-menu-item>菜单2</i-menu-item>
    <i-menu-item>菜单3</i-menu-item>
    <i-menu-item>菜单4</i-menu-item>
  </i-menu>

  <h4>v-model 用法</h4>
  <i-menu v-model="active">
    <i-menu-item>菜单1</i-menu-item>
    <i-menu-item>菜单2</i-menu-item>
    <i-menu-item>菜单3</i-menu-item>
    <i-menu-item>菜单4</i-menu-item>
  </i-menu>
</template>

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

const active = ref('1')

const handleChange = (val) => {
  console.log(val)
  active.value = val
}
</script>

显示代码复制代码复制代码

带前后缀

通过 prefixContent 和 suffixContent 插槽分别设置导航项的前后缀：

• 菜单1
• 菜单2
• 菜单3
• 菜单4

个人中心

<template>
  <i-menu defaultActive="b">
    <i-menu-item value="a">菜单1</i-menu-item>
    <i-menu-item value="b">菜单2</i-menu-item>
    <i-menu-item value="c">菜单3</i-menu-item>
    <i-menu-item value="d">菜单4</i-menu-item>

    <template #prefixContent>
      <img src="/images/logo.svg" />
    </template>
    <template #suffixContent>
      <div>个人中心</div>
    </template>
  </i-menu>
</template>

显示代码复制代码复制代码

嵌套导航

可使用 i-menu-group 嵌套多层导航：

• 菜单1
菜单2
• 菜单3
• 菜单4

<template>
  <i-menu :modelValue="active" @change="handleChange">
    <i-menu-item>菜单1</i-menu-item>
    <i-menu-group title="菜单2">
      <i-menu-item>菜单2-1</i-menu-item>
      <i-menu-group title="菜单2-2">
        <i-menu-item>菜单2-2-1</i-menu-item>
        <i-menu-item>菜单2-2-2</i-menu-item>
        <i-menu-item>菜单2-2-3</i-menu-item>
        <i-menu-item value="menu2-2-4">菜单2-2-4</i-menu-item>
      </i-menu-group>
      <i-menu-item value="menu2-3">菜单2-3</i-menu-item>
    </i-menu-group>
    <i-menu-item>菜单3</i-menu-item>
    <i-menu-item>菜单4</i-menu-item>
  </i-menu>
</template>

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

const active = ref('menu2-2-4')

const handleChange = (val) => {
  console.log(val)
  active.value = val
}
</script>

显示代码复制代码复制代码

垂直方向

通过 direction 属性控制导航方向：

• 菜单1
菜单2
菜单2-1
菜单2-2
菜单2-2-1
菜单2-2-2
菜单2-2-3
菜单2-2-4
菜单2-3
• 菜单3
• 菜单4

个人中心

<template>
  <i-menu
    :width="200"
    direction="vertical"
    :modelValue="active"
    @change="handleChange"
  >
    <i-menu-item>菜单1</i-menu-item>
    <i-menu-group title="菜单2">
      <i-menu-item>菜单2-1</i-menu-item>
      <i-menu-group title="菜单2-2">
        <i-menu-item>菜单2-2-1</i-menu-item>
        <i-menu-item>菜单2-2-2</i-menu-item>
        <i-menu-item>菜单2-2-3</i-menu-item>
        <i-menu-item value="menu2-2-4">菜单2-2-4</i-menu-item>
      </i-menu-group>
      <i-menu-item value="menu2-3">菜单2-3</i-menu-item>
    </i-menu-group>
    <i-menu-item>菜单3</i-menu-item>
    <i-menu-item>菜单4</i-menu-item>

    <template #prefixContent>
      <img src="/images/logo.svg" />
    </template>
    <template #suffixContent>
      <div>个人中心</div>
    </template>
  </i-menu>
</template>

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

const active = ref('menu2-2-4')

const handleChange = (val) => {
  console.log(val)
  active.value = val
}
</script>

显示代码复制代码复制代码

Menu API

属性	说明	类型	默认值
width	导航宽度	string〡number	--
modelValue / v-model	固定选中值（受控）	string〡number	--
defaultActive	默认选中值（非受控）	string〡number	0
direction	导航方向	"horizontal"〡"vertical"	horizontal

Menu Slots

插槽名	说明
prefixContent	前置内容
suffixContent	后置内容

Menu Events

属性	说明	类型	默认值
change	点击菜单项时触发	(value: string〡number) => void	--

MenuItem Attributes

属性	说明	类型	默认值
value	单项唯一标识	string〡number	索引值

MenuItem Events

属性	说明	类型	默认值
click	点击单项时触发	(string〡number) => void	--

MenuGroup Attributes

属性	说明	类型	默认值
title	折叠项标题	ReactNode	--