elementui NavMenu

ElementUI 是一套构建于 Vue.js 之上的高质量 UI 组件库。它提供了一整套预设的、基于原生Web标准的组件，并且简洁而高效地解决了基础 Web 界面设计的问题。

`NavMenu` 是 ElementUI 提供的一个用于创建导航菜单的组件。通过这个组件，你可以快速搭建出美观且功能丰富的导航界面。`NavMenu` 支持多种样式和布局选项，能够适应各种网站和应用的需求。以下是一些关键特性：

### `NavMenu` 的基本结构

`NavMenu` 组件通常包含一个或多个 `NavItem` 或 `NavItemGroup` 子元素，它们构成了导航菜单的主要内容。每个 `NavItem` 可以配置链接、图标、标题等属性。

### 样式和自定义

`NavMenu` 支持动态加载样式，可以轻松调整颜色、字体大小、间距等外观属性。此外，开发者还可以通过自定义 CSS 类来自定义其样式。

### 动画效果

`NavMenu` 支持动画效果，当用户滚动页面时，导航菜单会平滑地展开或收起，提升用户体验。

### 使用示例

下面是一个简单的 `NavMenu` 使用示例：

<template>
  <el-container>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        @select="handleSelect"
        mode="vertical"
      >
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-location"></i> 第一层菜单</template>
          <el-menu-item-group>
            <template slot="title">子菜单组</template>
            <el-menu-item index="1-1">选项一</el-menu-item>
            <el-menu-item index="1-2">选项二</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="第二级菜单">
            <el-menu-item index="1-3-2">选项三四</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-header>
  </el-container>
</template>

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

###