【区分vue2和vue3下的element UI NavMenu 导航菜单组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Element UI（针对 Vue 2）和 Element Plus（针对 Vue 3）中，NavMenu 导航菜单组件通常被称为 el-menu。虽然两个版本在 API 和实现上可能有一些细微的差别，但基本概念和用法是相似的。下面我将分别介绍在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中如何使用 el-menu 组件。

Vue 2 + Element UI

在 Vue 2 的 Element UI 中，el-menu 组件用于创建导航菜单。

属性（Props）

• mode：菜单模式，如 horizontal（水平）或 vertical（垂直）。
• default-active：默认激活的菜单项的索引。
• default-openeds：默认展开的菜单项的索引数组（仅当 mode 为 vertical 时有效）。
• unique-opened：是否只保持一个子菜单的展开（仅当 mode 为 vertical 时有效）。
• router：是否启用路由模式。
• background-color：菜单的背景色。
• text-color：菜单的文字颜色。
• active-text-color：当前激活菜单的文字颜色。
• …（还有其他属性，具体请参考 Element UI 官方文档）

事件（Events）

• select：当菜单项被点击时触发。
• open：当子菜单展开时触发。
• close：当子菜单关闭时触发。
• …（还有其他事件，具体请参考 Element UI 官方文档）

示例

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    @select="handleSelect"
    mode="vertical"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <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>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.activeIndex = key;
    }
  }
};
</script>

Vue 3 + Element Plus

在 Vue 3 的 Element Plus 中，el-menu 组件的用法与 Vue 2 的 Element UI 类似，但可能会有一些 API 变动和新增功能。

属性（Props）和事件（Events）

Element Plus 的 el-menu 组件的大部分属性和事件与 Element UI 保持一致，但可能会有一些细微的差别或新增的属性/事件。

示例（假设与 Element UI 类似）

<template>
  <el-menu
    :default-active="activeIndex"
    @select="handleSelect"
    mode="vertical"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-submenu index="2">
      <template #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>
</template>

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

const activeIndex = ref('1');

function handleSelect(key, keyPath) {
  console.log(key, keyPath);
  activeIndex.value = key;
}
</script>

注意：由于 Element Plus 还在不断发展中，具体的 API 和使用方法可能会有所不同