ElementUI 的组件 NavMenu 导航菜单如何使用？

导航菜单（NavMenu）是构建网页导航结构的重要组成部分。ElementUI 提供了 NavMenu 组件，使得在 Vue.js 应用程序中创建导航菜单变得简单而灵活。本文将介绍 ElementUI 的 NavMenu 组件的使用方法，帮助你快速上手。

首先，确保你已经在项目中正确引入了 ElementUI 库。可以通过 npm 安装 ElementUI，并在 Vue 应用的入口文件中导入和注册该库。

安装 ElementUI：

npm install element-ui

导入和注册 ElementUI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

完成以上步骤后，你就可以在 Vue 组件中使用 ElementUI 的 NavMenu 组件了。

下面是一个简单的示例，展示了如何使用 NavMenu 组件：

<template>
  <div>
    <el-menu :default-active="activeMenu" mode="horizontal" @select="handleMenuSelect">
      <el-menu-item index="1">菜单项一</el-menu-item>
      <el-menu-item index="2">菜单项二</el-menu-item>
      <el-menu-item index="3">菜单项三</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: '1'
    };
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index;
    }
  }
};
</script>

在上述示例中，我们使用 el-menu 标签创建了一个导航菜单，内部包含了三个 el-menu-item 子组件作为菜单项。

通过 default-active 属性，我们设置了默认选中的菜单项为 "菜单项一"（index 为 "1"）。

通过 mode 属性，我们设置了导航菜单的模式为 "horizontal"，即水平导航菜单。

通过 @select 事件，我们可以监听菜单项的选中事件，并在 handleMenuSelect 方法中更新 activeMenu 数据属性，以反映当前选中的菜单项。

通过以上代码，你已经成功创建了一个导航菜单。

NavMenu 组件提供了许多配置选项，使你能够自定义导航菜单的样式、展示效果、选中状态等。

在上述示例中，我们使用了一些常见的配置选项。你可以根据实际需求进行配置。

除了基本的用法外，ElementUI 的 NavMenu 组件还提供了一些其他的功能，如嵌套菜单、分组菜单、禁用菜单项等，你可以根据实际需求进行使用。

例如，你可以创建一个嵌套菜单：

<el-menu :default-active="activeMenu" mode="horizontal">
  <el-submenu index="1">
    <template slot="title">菜单一</template>
    <el-menu-item index="1-1">子菜单一</el-menu-item>
    <el-menu-item index="1-2">子菜单二</el-menu-item>
  </el-submenu>
  <el-submenu index="2">
    <template slot="title">菜单二</template>
    <el-menu-item index="2-1">子菜单一</el-menu-item>
    <el-menu-item index="2-2">子菜单二</el-menu-item>
  </el-submenu>
</el-menu>

在上述示例中，我们使用 el-submenu 组件创建了两个嵌套菜单，每个嵌套菜单下包含了两个子菜单项。

综上所述，ElementUI 的 NavMenu 组件提供了简单而灵活的方式来创建导航菜单。通过合理配置和使用，你可以实现各种类型的导航菜单，并根据需求进行交互操作。希望本文对你使用 ElementUI 的 NavMenu 组件有所帮助，祝你构建出优雅的导航菜单！

ElementUI 的组件 NavMenu 导航菜单 如何使用？

ElementUI 的组件 NavMenu 导航菜单如何使用？