el-menu详解

el-menu 是 Element Plus 框架中的一个导航菜单组件，用于创建各种类型的导航菜单。它可以是水平的或垂直的，并支持多种配置选项以满足不同的需求。

一。el-menu 属性详解

1. mode:

   • 用途: 菜单的模式，可选值为 horizontal 或 vertical。
   • 默认值: vertical

2. default-active:

   • 用途: 当前激活菜单的 index。

3. default-openeds:

   • 用途: 当前打开的 sub-menu 的 index 的数组。
   • 默认值: []

4. unique-opened:

   • 用途: 是否只保持一个子菜单展开。
   • 默认值: false

5. router:

   • 用途: 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转。
   • 默认值: false

6. collapse:

   • 用途: 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）。
   • 默认值: false

7. background-color:

   • 用途: 菜单的背景色。

8. text-color:

   • 用途: 菜单的文字颜色。

9. active-text-color:

   • 用途: 当前激活菜单的文字颜色。

10. open-delay:

    • 用途: 子菜单打开的延迟时间（单位毫秒）。
    • 默认值: 300

11. close-delay:

    • 用途: 子菜单关闭的延迟时间（单位毫秒）。
    • 默认值: 300

二。 el-menu 事件详解

1. select:

   • 类型: Function
   • 用途: 菜单项被点击时触发的回调函数。
   • 参数: index（被点击菜单项的 index）、indexPath（被点击菜单项的 indexPath）

三。 el-menu 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义菜单项的内容。

四。 el-submenu 属性详解

1. index:

   • 用途: 唯一标识符。

2. show-timeout:

   • 用途: 子菜单展开的延迟时间（单位毫秒）。
   • 默认值: 300

3. hide-timeout:

   • 用途: 子菜单关闭的延迟时间（单位毫秒）。
   • 默认值: 300

五。 el-menu-item 属性详解

1. index:

   • 用途: 唯一标识符。

2. route:

   • 用途: 导航链接的目标路径对象。

六。实例

<template>
  <div>
    <h2>Menu 示例</h2>

    <!-- 基本用法 -->
    <el-menu default-active="2" class="el-menu-vertical-demo" @select="handleSelect">
      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">导航一</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航二</span>
        </template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
      </el-submenu>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
    </el-menu>

    <!-- 水平模式 -->
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
    </el-menu>

    <!-- 垂直模式 -->
    <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse">
      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">导航一</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航二</span>
        </template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
      </el-submenu>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
    </el-menu>

    <!-- 使用 router 模式 -->
    <el-menu :default-active="$route.path" router>
      <el-menu-item index="/">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="/about">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>关于我们</span>
        </template>
        <el-menu-item index="/about/team">团队介绍</el-menu-item>
        <el-menu-item index="/about/contact">联系我们</el-menu-item>
      </el-submenu>
    </el-menu>

    <!-- 自定义样式 -->
    <el-menu :default-active="activeIndex" class="custom-menu" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
    </el-menu>
  </div>
</template>

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

const activeIndex = ref('1')
const isCollapse = ref(false)

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>